Reverse the columns in an Angular grid layout

We are currently utilizing angular-grid for showcasing a dynamic grid with multiple columns. For example:

col1    col2   col3    col4   col5    col6   col7    col8   col9    colx

Despite the columns being retrieved in the correct sequence, angular grid is displaying them in reverse order like so:

colx    col9   col8    col7   col6    col5   col4    col3   col2    col1

Is there any solution to reversing these columns? We are unable to use column destinations since the number of columns returned varies.

javascriptangularjsng-gridangular-grid

Answer №1

Ensure that you arrange them in the appropriate sequence within the columnDefs.

For further information, please refer to the following documentation: http://angular-ui.github.io/ng-grid/

If you are unsure about the columns prior to retrieval, you can define this property once you have obtained the data, possibly by analyzing the first row.

Answer №2

To customize the columnDefs for your specific dataset, you will need to follow these steps:

$scope.dynamicData = [
  {label: 'Name', value: 'John'},
  {label: 'Age', value: 25},
  // Add more dynamic data here
];

$scope.$watchCollection('dynamicData', function(new_dynamicData, old_dynamicData) {
  angular.forEach(new_dynamicData, function(item, index) {
    $scope.columnDefs[index] = {
      headerName: item.label,
      field: item.value
    };
  });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The UI encountered an error with updating job status in mediaconvert due to excessive requests using the javascript SDK

This platform utilizes React Js for the frontend and nodeJs for the backend. It is hosted on an AWS EKS cluster and functions as a video portal where users can upload videos. These videos are processed using AWS mediaconvert and stored in S3 once processin ...

javascriptnode.jsreactjsamazon-eksaws-media-convert

Tips for effectively incorporating customized validation into an array using vuelidate

My array of objects has a specific structure that looks like this varientSections: [ { type: "", values: [ { varientId: 0, individualValue: "" } ] } ] To ensure uniqueness, I implemented a c ...

javascriptvue.jsvuelidate

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Making a Highcharts Pie Chart Legend Embedded Within a Table

Looking for a way to incorporate a Highcharts legend into a table layout? I am aiming to design the legend for my Highcharts pie chart with alternating background colors and custom borders for each element. Although I have styled the legend, I am struggli ...

javascripthighchartslegend

Looking for assistance with using an array in a for loop with an if-

I'm having trouble with a For loop array. I need to retrieve the data that is opposite of a given function, but when I use arr[i] != elem, it prints out the entire array. On the other hand, if I use arr[i] == elem, it gives me the array that I don&apo ...

javascriptarraysfor-loop

Troubleshooting Angular 2 ng-if issues

Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...

javascripthtmlcssangularjs

Meteor: Transforming MongoDB server logic for the client's use

Although I can successfully retrieve data from the meteor mongo terminal using this code, I am struggling to fetch data from the client side. I realize that the syntax for the client side is different, but being new to this environment, I am unsure of ho ...

javascriptreactjsmongodbmeteor

Creating a table using jQuery and JSON

Could someone assist me in figuring out how to add a new table row every time the loop starts? Here is my jQuery code: var row = $("<tr></tr>"); $.each(data.response.docs, function (i, item) { row.append('<td>' + ...

javascriptjqueryjsonhtml-tablejsonp

Failed Socket.IO Cross-Origin Resource Sharing request

In the client-side code of my Angular module, I have the following setup for a socket client: angular.module('App') .factory('socketClient', function(socketFactory, Auth) { // Auto-configuring socket.io connection with authentic ...

angularjsnode.jsfirefoxexpresssocket.io

Organize items alphabetically by name within the template rather than within the controller

Check out my Plunker code here! I am trying to implement a sorting functionality for items based on their names. The issue I am facing is with the top item, "Please select a student name", which appears as an empty field. <select ng-options="student a ...

angularjs

Differences between using "break + return" and simply "return" in

Currently, I am developing a nodejs Heap and ensuring top performance is key. The code snippet I have looks like this: while(true) if(x) do something return if(y) do ... return if(z) do ... else return Suggestions were made to me to incorporate ...

javascriptnode.jsperformanceoptimization

What is the process of retrieving a property value from a database using selected values from cascaded drop-down lists?

I am facing a challenge where I need to extract a property of an entity by passing the IDs of selected items from a cascaded dropdown list. The requirement is to update the price every time there is a change in either level 1 or level 2 of the cascading dr ...

javascriptc#jqueryasp.net-mvcgetjson

Loading data into a secondary dropdown list depending on the choice made in the primary dropdown list using MVC2

I encountered a similar issue as detailed in this question and attempted to implement the suggested solution. However, I struggled to get it to work, likely due to my limited understanding of jquery and javascript. Upon inspecting it in Firebug, I noticed ...

javascriptjqueryasp.net-mvc-2drop-down-menu

What could be the reason for the absence of this modal?

I'm trying to create a modal that will be shown to users when they use the command modal. Can anyone help me troubleshoot this code? const { MessageActionRow, Modal, TextInputComponent } = require('discord.js'); client.on('interactionC ...

javascriptnode.jsdiscorddiscord.js

Is it a bad idea to set directive scope to false, considering the limitations on broadcasting in an isolated scope?

There is a unique situation I am trying to tackle where I need to use $broadcast within a directive's linking function that has an isolated scope. Unfortunately, broadcasting from inside an isolated scope becomes challenging as the directive scope doe ...

javascriptangularjsangularjs-directivescope

When transitioning from one screen to another in React Native, the toast does not appear. Setting a setTimeout of 1000 fixes this issue temporarily, but I am looking for a way to display

visitSite("openshift") setTimeout(() => { displayMessage('Shift Assigned', 'success'); }, 1000); // HOWEVER, I prefer to have the functionality of displaying a success message and navigating between screens separated into distin ...

javascriptreact-native

Ways to update the icon on a jQuery button

I am currently trying to modify a button on my website that looks like this: <button type="submit" class="btn blue pull-right" id="RequestNewPwd"> Submit <i class="m-icon-swapright m-icon-white"></i> </butto ...

javascriptjqueryhtml

Adjusting the dimensions of a tri-fiber canvas prior to saving it

I have a unique inquiry regarding Three Fiber. Once the download button is clicked, it generates a base64 using toDataURL, which can then be downloaded. The resulting image adopts the height and width of the canvas, which in turn matches the height and w ...

javascriptreactjscanvasthree.jsreact-three-fiber

Mobile Devices Experience AJAX Failures

My AJAX requests are not working properly on mobile browsers and iPads, but they work perfectly on desktop computers. I am struggling to figure out what the issue might be. var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ ...

javascriptajax

Ways to verify whether a callback function supplied as a parameter in Javascript has any arguments

My task involves implementing the following: doSomething .then(success) .catch(failure); The success and failure functions are callbacks that will receive their value at runtime (I am developing a module). Therefore, I need to ensure that the fa ...

javascriptnode.jscallbackjavascript-objects