Angularjs ui grid with grouping column sequence is getting jumbled up

Question

I am using AngularJs ui grid with grouping. The table is displaying fine but the problem I am facing is that the months sequence in the table is getting jumbled up. Please find my Plunker. In the table the Months are appearing in the jumbled up sequence 11-14, 05-15, 04-15, ... 02-15. But I need it in the sequence of 11-14, 12-14, 01-15, 02-15, 03-15, 04-15, 05-15. Can any one help me to fix it?

I am using the following for to get colDefs:

$scope.getColumnDefsForUiGrid = function(columns) {
     var colDef = [];
     colDef.push({
         name: 'mode',
         grouping: {
             groupPriority: 0
         },
         displayName: 'Type',
         enableCellEdit: false,
         width: '5%'
     });
     colDef.push({
         name: 'service',
         displayName: 'Catg',
         enableCellEdit: false,
         width: '5%'
     });
     angular.forEach(columns, function(value, key) {
         colDef.push({
             name: key,
             displayName: value,
             enableCellEdit: true,
             aggregationType: uiGridConstants.aggregationTypes.sum,
             width: '5%'
         })
     });
     return colDef;
 };

Actually your ui-grid columns are in the exact same order than your $scope.columns. If you want to change the order, you can reorder this object. — Okazari
– Okazari, Commented May 13, 2015 at 8:16
plnkr.co/edit/MkE58U9mefiRyMTC4Ohf?p=preview Now they are. But i'm not sure i get your problem. In your application does this column def is hard-coded too ? or are the column dynamic ? — Okazari
– Okazari, Commented May 13, 2015 at 8:31
It is dynamic. First I need to get mode and then service after that all the months should be displayed sequential order. After pushing Mode and Service into colDef, I have the flexibility to change the logic while looping through using angular.forEach(columns, function( value, key ). Can we something here in order to keep the sequence in the order? — Madasu K
– Madasu K, Commented May 13, 2015 at 8:49

Okazari · Accepted Answer · 2015-05-19 08:34:04Z

1

Here is a workaround for your problem you can see it working on this plunker

$scope.getColumnDefsForUiGrid = function( columns ){
        var colDef = [];                        
        colDef.push({name: 'mode', grouping: { groupPriority: 0 }, displayName: 'Type', enableCellEdit: false, width: '5%'});
        colDef.push({name: 'service',  displayName: 'Catg', enableCellEdit: false, width: '5%'});

        //I split the monthColumns into an other array                      
        var monthCol = [];
        angular.forEach(columns, function( value, key ) {
              monthCol.push({name: key, displayName: value, enableCellEdit: true, aggregationType : uiGridConstants.aggregationTypes.sum, width: '5%' })
        });

        //I sort this array using a custom function
        monthCol.sort(function(a,b){
              a = a.displayName.split("-");
              b = b.displayName.split("-");
              if(a[1] < b[1]){
                  return -1;
              }else if (a[1] > b[1]){
                  return 1;
              }else {
                  if(a[0] < b[0]){
                     return -1;
                  }else{
                    return 1;
                  }
              }
        });

   //I concat the two array
   return colDef.concat(monthCol);
};

edited May 19, 2015 at 8:34

answered May 13, 2015 at 9:25

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Madasu K Over a year ago

Yes, Accepted the Answer. Thanks

Collectives™ on Stack Overflow

Angularjs ui grid with grouping column sequence is getting jumbled up

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related