How to use ExternalSorting in ng-grid, with a $watch on sortInfo?

Question

I have the following settings for my ng-grid in my code :

$scope.gridOptions = {
    ...
    useExternalSorting : false,
}

$scope.watch('gridOptions.ngGrid.config.sortInfo', function (oldValue, newValue) {
    console.log(newValue)
})

I also tried using sortInfo : undefined and $watch(gridOptions.sortInfo). This seems to work only when the grid initially loads. After that, when I click on the header columns, it does not seems to go inside the callback function for the $watch. I tried putting a debugger inside the callback function which triggers the sort, and I could see the the code updating the sortInfo array with the right information, however it does not seem to go inside the callback function for the watch statement. Is there anything incorrect with my setup? I have a Plunker here with something similar to what I'm trying to do.

Deerskin

Answer 1

I had the same problem. I wanted to do my own server-side sorting but still use the sortInfo object that's updated when the column headers are clicked. After looking at some errors in the console, I found that I had to set a default sortInfo like so:

$scope.gridOptions = { ... sortInfo: { fields: [], columns: [], directions: [] }, useExternalSorting: true }

I'm not sure why the columns field is necessary and it doesn't match the documentation. I'm using AngularJS v1.2.19 and ng-grid v2.0.11. Not sure why you have useExternalSorting set to false but either way you should now be able to set a watch on that field like this:

$scope.$watch('gridOptions.sortInfo', function (newVal, oldVal) { console.log(newVal); }, true);

Jose

Answer 2

If you really need to watch the sorting changes you could use the following:

    //default sorting
    $scope.sortOptions = {
    sortfield: "name",
    sortdir: "DESC"
    };

    //on sorting event fill out sortOptions in scope
    $scope.$on('ngGridEventSorted', function(event, data) {
    $scope.sortOptions.sortfield = data.fields[0];
    $scope.sortOptions.sortdir = data.directions[0];

    });

    //when sortOption changes do something
    $scope.$watch('sortOptions', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      console.log("ngGrid Field: " + $scope.sortOptions.sortfield + " - Direction: " + $scope.sortOptions.sortdir);
    }
    }, true);

Which uses the sort event to fill out the sortinfo in the scope which is watched and fires when it changes. Plunker here

Or, less complicated, fire directly on sort event and spare yourself the boring watching 8-\

//on sorting event do something
$scope.$on('ngGridEventSorted', function(event, data) {
    console.log("ngGrid Field: " + data.fields[0] + " - Direction: " +data.directions[0]);
}); 

Another plunker

Gyniatrics

Answer 3

I got external sorting working a little different then the post I seen here so far.

    $scope.gridOptions = {
                paginationPageSize: 100,
                enableSorting: true,
                useExternalSorting: true,
                enableGridMenu: false,
                enableColumnMenus: false,
                showFooterRow: true,
                enableFiltering: true,
                useExternalPagination: true,
                enableRowSelection: true,
                noUnselect: true,
                multiSelect: false,
                enableRowHeaderSelection: false,
                onRegisterApi: function(gridApi) {
                   $scope.gridApi = gridApi;
                   gridApi.core.on.sortChanged($scope, (grid, sortColumns) => {
                     var sortColumn = sortColumns[0].field;               
                     var sortDirection = sortColumns[0].sort.direction;
                     // then I call a method in my controller which hits my server
                     // side code and returns external sorting through a linq query
                     $scope.UpdateGrid(sortColumn, sortDirection );
                  });
                }, //onRegisterApi
     }; // gridOptions 

Cultivar