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; }; 

Answer 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); };