Title: AngularJS: ng-grid does not work when using 'sortFn' and 'groups'
Tags: angularjs;ng-grid
Question: I wonder if it is possible to customize the sorting and grouping to use the same column.
I made an example in Plunker where the 'groups' option is commented out. When this line is uncommented the grid does not display any records.
$scope.myData = [{complex:{name: "Felipe",  order: 3}},
{complex:{name: "Luciano", order: 1}},
{complex:{name: "Lucílio", order: 2}},
{complex:{name: "Joacás",  order: 4}}];
$scope.gridOptions = {
data: 'myData',
groups: ['complex.name'], // does not work when uncommented...
groupsCollapsedByDefault: false,
columnDefs: [{
field: 'complex',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"&gt;<span ng-cell-text&gt;{{COL_FIELD.name}}</span&gt;</div&gt;',
displayName: 'Name',
sortFn: funcOrder}]
var funcOrder = function sort(a, b) {
if (a.order < b.order) {
return -1;
} else if (a.order &gt; b.order) {
return 1;
else {
return 0;
Link Plunker: http://plnkr.co/edit/krlAsVr7NM30fFljyaQH
Thank U.

Here is the accepted answer: I too faced a same kind of issue in my application and i have been solved by moving the columnDefs definition to the $scope and used in the gridOptions.
$scope.columnDefinitions = [{
field: 'complex',
cellTemplate: '<div class=&quot;ngCellText&quot; ng-class=&quot;col.colIndex()&quot;&gt;<span ng-cell-text&gt;{{COL_FIELD.name}}</span&gt;</div&gt;',
displayName: 'Name',
sortFn: funcOrder
field: 'complex',
cellTemplate: '<div class=&quot;ngCellText&quot; ng-class=&quot;col.colIndex()&quot;&gt;<span ng-cell-text&gt;{{COL_FIELD.order}}</span&gt;</div&gt;',
displayName: 'Order'
$scope.gridOptions = {
data: 'myData',
groups: ['complex.name'], // Working when uncomment
groupsCollapsedByDefault: false,
enableSorting: true,
columnDefs: 'columnDefinitions'
UPDATE 1 : [Mar 17' 2015]
Modified the columnDefs's field property from complex to complex.name and in the cellTemplate {{COL_FIELD.name}} to {{COL_FIELD}}
$scope.gridOptions = {
data: 'myData',
groups: ['complex.name'],
groupsCollapsedByDefault: false,
enableSorting: true,
columnDefs: [{
field: 'complex.name',
cellTemplate: '<div class=&quot;ngCellText&quot; ng-class=&quot;col.colIndex()&quot;&gt;<span ng-cell-text&gt;{{COL_FIELD}}</span&gt;</div&gt;',
displayName: 'Name',
sortFn: funcOrder
}, {
field: 'complex.order',
cellTemplate: '<div class=&quot;ngCellText&quot; ng-class=&quot;col.colIndex()&quot;&gt;<span ng-cell-text&gt;{{COL_FIELD}}</span&gt;</div&gt;',
displayName: 'Order'
}]
UPDATE 2 : [Mar 17' 2015]
I can't able to do by using sortFn, instead of that i have added the sortInfo, useExternalSorting and created my customized sortData function to achieve this.
By default, i have set the Name as the sorting field with asc order. So it sorted the Name as well as the Order in asc. Screen shot as below:
When user manually set the descending order, the Name and Order fields are in desc order. Screen shot as below:
Can you please check the updated plunker: http://plnkr.co/edit/itF5CdHoptP6Nij36J8T
UPDATE 3: [MAR 18' 2014]
I added your question as well as my code.
1 ) When the controller is started, should be originator for all grouping columns.
2 ) When the user clicks on another column, the sort need to keep the grouping ( ASC ) and the column he clicked ( ASC or DESC ).
So i sorted by requested field and one more time sorted by the grouping field with asc order to retain the Grouping column wont change for any field sort.
angular.forEach(fields, function(item, i) {
filterData = orderBy(filterData, [fields[i]], directions[i] == 'desc' ? true : false);
filterData = orderBy(filterData, ['complex.name'], false);
New Plunker for revised code
Hope this is what you expected.
Comment for this answer: Instead of sortFn: myFunc for a custom sort function, try using sortingAlgorithm: myFunc
Comment for this answer: The goal is to show the grouped names and sort by the field "order". In this case the ordering is not working.
Comment for this answer: It worked!! Thank you very much. But I have another question. I wanted to keep, by default, all grouping columns as ascending order in all sort of situations:
1 ) When the controller is started, should be originator for all grouping columns.
2 ) When the user clicks on another column, the sort need to keep the grouping ( ASC ) and the column he clicked ( ASC or DESC ).
The purpose of this question is not to lose the ordering of groups.
Does it have to do this ?
plunker: http://plnkr.co/edit/zKuQD2icA2pS2q9drhs3?p=preview
Comment for this answer: That's Perfect. Thank you for your help. =)
Comment for this answer: Arulkumar, You could take one more question?
Using his last Plunker , how do I display in the Last Name column , their own values ​​, and at the time of ordering, use the Order column to sort of reference.
Currently, the Last Name column is being sorted by their values ​​(A, B , C, D...). I wish she was ordered by the values ​​of column Order (1, 2, 3, ...)
Comment for this answer: In this case are right, but if the Order column ( orderLastName ) were invisible ( visible: false) ?
Comment for this answer: Answer updated, now sorting is always depending on the `order` field.
Comment for this answer: Do you mean, the `LastName` column is always order by the `orderLastName` value? If so already sort by `Order` is the same function  right!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:02/27/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angularjs><ng-grid>', 'Title': "AngularJS: ng-grid does not work when using 'sortFn' and 'groups'", 'ViewCount': 1689, 'id': 28772339, 'user_AboutMe': '', 'user_AccountId': 2575568.0, 'user_DisplayName': 'Felipe Burégio', 'user_Reputation': 51.0, 'user_Views': 32.0, 'user_id': 2233350.0}}