ng-grid Server Side Sorting error #223

karim017 · 2013-03-08T08:10:45Z

Client Side Sorting in ng-grid is working
But Server Side Sorting is not working.
Is there anyone who can help me on this issue. I am using latest version of ng-grid.
Here is my sample code..................

$scope.pagingOptions = {
pageSizes: [5, 10, 50],
pageSize: 5,
totalServerItems: 0,
currentPage: 1
};

$scope.sortInfo = { field: 'TransactionType', direction: 'asc', };


$scope.$watch('sortInfo', function () {
  //  alert('Sorted Info: ' + $scope.sortInfo);
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}, true);
$scope.$watch('sortInfo.field', function () {
    //alert('Sorted field: ' + $scope.sortInfo.field);
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}, true);

$scope.$watch('sortInfo.column', function () {
   // alert('Sorted column: ' + $scope.sortInfo.column);
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}, true);

$scope.$watch('sortInfo.direction', function () {
    //alert('Sorted direction: ' + $scope.sortInfo.direction);
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}, true);



$scope.$watch('pagingOptions', function () {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}, true);


$scope.setPagingData = function (data, page, pageSize) {
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.priorities = pagedData;
    $scope.pagingOptions.totalServerItems = data[0].TotalCount;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

$scope.getPagedDataAsync = function (pagesize, page) {

    $scope.SearchSettlementData();
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

$scope.gridOptionsTestReport = {
    data: 'gridOptionsTestReport ', enableSorting: true, showFilter: false,
    sortinfo: $scope.sortInfo,
    selectedItems: $scope.mySelections,
    enablePaging: true,
    enableSorting: true,
    useExternalSorting: true,
    pagingOptions: $scope.pagingOptions,        
    keepLastSelected: true,
    showColumnMenu: false, multiSelect: false, displaySelectionCheckbox: false,
    columnDefs: [{ field: 'TransactionNumber', displayName: "Transaction Number", cellTemplate: '<a href="#view-detail-dialog" name="{{row.getProperty(col.field)}}" onclick="javascript:testing(this)" data-toggle="modal" style="margin-top: 5px;" >{{row.getProperty(col.field)}} </a>', width: '*', sortable: false },
        { field: 'TransactionDate', displayName: "Transaction Date", width: '*',  sortable: true },
        { field: 'TransactionType', displayName: "Transaction Type", width: '*', sortable: true },
        { field: 'GrossSalesAmount', displayName: "Gross Sales Amount", width: '*', sortable: true }


    ]

};

The text was updated successfully, but these errors were encountered:

orneryd · 2013-03-08T08:51:20Z

hi karim,

I realize we forgot to update the documentation around some changes we made to sortInfo

each of the properties of sortInfo are now arrays[] and plural. this was done to accomodate multi-column sorting.

However, I see that we may need to make a change for it to work properly but I do have a workaround for now.

http://plnkr.co/edit/9CVUuwtlHGsTM2vaxYu3?p=preview

karim017 · 2013-03-08T10:09:55Z

hi Tim,

I have changed sortinfo as array but still does not fire server method in my project.

I have also change your plnkr code but code not get data in plnkr grid
please look at following code that i changed in your plnkr

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function () {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}, true);
$scope.$watch('filterOptions', function () {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}, true);   

$scope.gridOptions = {
    data: 'gridOptionsTestReport ', 
    enableSorting: true, 
    showFilter: false,
    sortinfo: $scope.sortInfo,
    selectedItems: $scope.mySelections,
    enablePaging: true,        
    useExternalSorting: true,
    pagingOptions: $scope.pagingOptions,        
    keepLastSelected: true,
    showColumnMenu: false,
    multiSelect: false, 
    displaySelectionCheckbox: false,
    columnDefs: [
        { field: 'name', displayName: "name", width: '*',  sortable: true },
        { field: 'allowance', displayName: "allowance", width: '*', sortable: true },
        { field: 'paid', displayName: "paid", width: '*', sortable: true }]
};


$scope.sortInfo = [{ fields:[ 'name'], directions: ['asc']}];


$scope.$watch('gridOptions.ngGrid.config.sortInfo', function () {
    alert('Sorted Info: ' + $scope.sortInfo);
}, true);

});

karim017 · 2013-03-08T11:10:23Z

Is there anyone who can help me on this

karim017 · 2013-03-08T12:42:11Z

Hi I have fix my that issue
Now I have another issue on that it is that how could i get the selected field and direction on that event
I tried with $scope.sortInfo.field and $scope.sortInfo.direction but getting undefined value
Can you help me on that issue

karim017 · 2013-03-08T14:58:03Z

The paging bar is also disappeared for new version
Is there any new syntax for paging

orneryd · 2013-03-08T17:16:20Z

its just the default options. the footer is hidden by default. please see
the documentation for more details.

On Fri, Mar 8, 2013 at 6:58 AM, karim017 notifications@github.com wrote:

The paging bar is also disappeared for new version
Is there any new syntax for paging

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/223#issuecomment-14624266
.

-Tim Sweet

orneryd · 2013-03-09T00:31:56Z

ok, so for the sorting i remembered there is a scope event that you can watch for to get the current sorting info

    $scope.$on('ngGridEventSorted', function (sortInfo) {
        alert('Sorted Info: ' +sortInfo);
    });

http://plnkr.co/edit/ek3N1Dyzj6IzCK1doPuH?p=preview

also fixed some issues related to this in commit 6c476f6 which will be merged into main here shortly

orneryd · 2013-03-09T00:40:36Z

fixed with #228

ShadesOB · 2013-09-10T18:52:46Z

Could be something I did. But I had to use
$scope.$on('ngGridEventSorted', function (something,sortInfo) {

hinguabhishek · 2014-08-06T09:24:02Z

Hi,
I had implemented server side sorting and paging for Grid, but the actual issue is some how ngGridEventSorted event fired infinite time and its generate a deadlock, please check code below

    var data;
    var request = {};
    request.pageOptions = {};
    request.pageOptions.PageSize = $scope.pagingOptions.pageSize;
    request.pageOptions.pageIndex = $scope.pagingOptions.currentPage;
    request.sortOptions = {};
    request.sortOptions.column = $scope.sortOptions.column;
    request.sortOptions.order = $scope.sortOptions.order;
    $http.post('api/employee/GetAllRecords', request).success(function (largeLoad) {
        //$scope.setPagingData(largeLoad, page, pageSize);
        $scope.myData = largeLoad.result;
        $scope.pagingOptions.totalServerItems = largeLoad.pageOptions.totalRecords;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    });

};



//    $scope.$watch('pagingOptions', function () {
//        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
//    }, true);
//    $scope.$watch('filterOptions', function () {
//        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
//    }, true);

$scope.gridOptions = {
    data: 'myData ',
    enableSorting: true,
    showFilter: false,
    sortinfo: $scope.sortInfo,
    showFooter: true,
    selectedItems: $scope.mySelections,
    enablePaging: true,
    enableSorting: true,
    useExternalSorting: true,
    pagingOptions: $scope.pagingOptions,
    keepLastSelected: true,
    showColumnMenu: false,
    multiSelect: false,
    totalServerItems: 'pagingOptions.totalServerItems',
    displaySelectionCheckbox: false,
    columnDefs: [{ field: 'name', displayName: "Name", sortable: true},
        { field: 'allowance', displayName: "Allowance", width: '*', sortable: true},
        { field: 'paid', displayName: "Paid", width: '*', sortable: false }
        ],
    pagingOptions: $scope.pagingOptions
};


$scope.sortInfo = [{ fields: ['name'], directions: ['asc'] }, { fields: ['allowance'], directions: ['asc'] }, { fields: ['paid'], directions: ['asc']}];


    $scope.$on('ngGridEventSorted', function (something, sortInfo) {
        alert("hi");
        //alert('Sorted Info: ' + sortInfo);
        $scope.sortOptions.column = sortInfo.fields[0] === undefined ? "name" : sortInfo.fields[0];
        $scope.sortOptions.order = sortInfo.directions[0] === undefined ? "asc" : sortInfo.directions[0];
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    });

// $scope.$watch('sortInfo', function (newval, oldval) {
// console.log("sort watch fired");
// if (!angular.equals(newval, oldval)) {
// console.log("new sorft info watch fired");
// $scope.sortOptions.column = newval.fields[0] === undefined ? "name" : newval.fields[0];
// $scope.sortOptions.order = newval.directions[0] === undefined ? "asc" : newval.directions[0];
// $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
// }
// },true);
// $scope.setPagingData = function (data, page, pageSize) {
// var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
// $scope.priorities = pagedData;
// $scope.pagingOptions.totalServerItems = data[0].TotalCount;
// if (!$scope.$$phase) {
// $scope.$apply();
// }
// };
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
});
also watch not trigger for sortInfo scope member, please help me to resolve this issue.

jefffohl · 2014-08-13T17:29:15Z

@Addaymichel - I had the same problem. I believe the reason that this is happening is that the sort event is fired whenever the data of the grid is updated. With server-side sorting, I was replacing the data in the grid whenever I did a sort. This caused the ng-grid sort event to continuously fire. I needed a way to make sure that this only happened once. This was my solution:

I created a custom header. Within this header, I replaced the ng-click="col.sort($event)" with a call to my own function which passes the col object and the $event, like this: ng-click="mySort(col,$event)"
My sort function looks like this:

$scope.mySort = function(col,e) {
    $scope.mySortCompleted = false;
    col.sort(e);
    $scope.mySortCompleted = true;
  };

Then, I watch for the sort event firing, where I check to see if my sort function has been called:

$scope.$on('ngGridEventSorted', function() {
    if ($scope.mySortCompleted) {
      return;
    }
    // code for retrieving data from the server goes here...
  });

EDIT: This is for version 2.0 of ng-grid.

karim017 closed this as completed Mar 8, 2013

karim017 reopened this Mar 8, 2013

orneryd added a commit that referenced this issue Mar 9, 2013

fixing sortInfo bug #223

6c476f6

orneryd closed this as completed Mar 9, 2013

MaximilianoRicoTabo mentioned this issue Oct 24, 2013

Problem with pagination and sorting #789

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng-grid Server Side Sorting error #223

ng-grid Server Side Sorting error #223

karim017 commented Mar 8, 2013

orneryd commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

orneryd commented Mar 8, 2013

orneryd commented Mar 9, 2013

orneryd commented Mar 9, 2013

ShadesOB commented Sep 10, 2013

hinguabhishek commented Aug 6, 2014

jefffohl commented Aug 13, 2014

ng-grid Server Side Sorting error #223

ng-grid Server Side Sorting error #223

Comments

karim017 commented Mar 8, 2013

orneryd commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

karim017 commented Mar 8, 2013

orneryd commented Mar 8, 2013

orneryd commented Mar 9, 2013

orneryd commented Mar 9, 2013

ShadesOB commented Sep 10, 2013

hinguabhishek commented Aug 6, 2014

jefffohl commented Aug 13, 2014