How to update sort-indicators in ui-grid programmatically? - angularjs

Question

I am using ui-grid - v3.0.0-rc.22 - 2015-06-15.
It is configured to use external sorting, which works fine.
Now i have the requirement to change the sorted column from outside with a select box. On every change of the select box it fires external sorting and the data in the grid is updated correctly. It also updates the gridOptions.columnDefs: It sets the sort object of all columns except the correct one to undefined and updates the sorted column.
But there is one problem, the current sorted column indicator (in the column header) is not updated as it should be.
I tried using gridApi.core.notifyDataChange() with "options" or"column" as parameter value but it didn't work also.
How to update the sort-indicators in ui-grid programmatically?
Here is a part of the code triggered by the select box:
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
col.sort = {
direction: $rootScope.QuickSearch.sortOrder,
priority: 0
};
}
else
{
col.sort = undefined;
}
});
}
if($scope.gridApi !== undefined)
{
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS );
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
}
}

Answer 1

You could use the function "sortColumn" of the ui-grid, like this:
$scope.gridApi.grid.sortColumn(column, directionOrAdd, add)
here is the source code of this function : ui-grid source code
in your example it will give somthing like this :
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
$scope.gridApi.grid.sortColumn(col,$rootScope.QuickSearch.sortOrder);
}
});
}
}
$rootScope.QuickSearch.sortOrder must be in (uiGridConstants.ASC|uiGridConstants.DESC). You do not have to provide it.

Answer 2

I had the same problem -- the solution in my case was what Gho5t helpfully mentioned in a comment on another answer on this question.
I'm adding this response so the solution can have more visibility (alongside a more complete code example).
I needed a way to hook into the sort event on a grid and sort other grids on the page by the same column (they all have the same column definitions).
I was incorrectly passing the gridOptions.colDefinition object to the sortColumn() method and the column header sort indicator was not updating.
The grid.column object was what the sortColumn() method was looking for and caused things to work as expected.
// sortColumns is an array of column objects that gets passed in when a grid column is sorted (this code only considers the first sorted column)
// secondGridObj is an object defined elsewhere that has a reference to another grid's gridApi object
gridApi.core.on.sortChanged(null, function (grid, sortColumns) {
if (sortColumns.length) {
var sortDirection = (sortColumns[0].sort) ? sortColumns[0].sort.direction || uiGridConstants.ASC : uiGridConstants.ASC;
var matchingColumn = _.find(secondGridObj.gridApi.grid.columns, function (v2) { return v2.field === sortColumns[0].field; });
if (matchingColumn) {
secondGridObj.gridApi.grid.sortColumn(matchingColumn, sortDirection, false)
.then(function() {
secondGridObj.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.COLUMN);
});
}
}
});