Event called when sorting data in kendo grid

Question

I have the sample codes as follows:

  $(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: getData(),
        height: 550,
        sortable: true,
        pageable: true,
        columns: [{
            field: "ContactName",
            title: "Contact Name",
            width: 200
        }, {
            field: "ContactTitle",
            title: "Contact Title"
        }, {
            field: "CompanyName",
            title: "Company Name"
        }]
    });
       function whenSorting(){
           //// DO SOMETIME......
       }
     });

Now what I want is when I do sorting of any field the function "whenSorting" will be called. How to do that?

Answer 1

You have local sorting enabled "sortable: true," , for this you can capture it with databound event

    $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: getData(),
                        height: 550,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }],
                        dataBound: function(e) {
                          whenSorting();
                        }
                    });

                   function whenSorting(){
                       //// DO SOMETIME......
                   }
                 });

IF you are using server sorting you can handle it in the server read .

Hope this helps

Answer 2

You may bind Change function and check whether sorting exist or not on every grid change

$('#grid').data('kendoGrid').dataSource.bind('change',function(){

    // Get the grid object
     var grid = $("#grid").data("kendoGrid");
    // Get the datasource bound to the grid
    var ds = grid.dataSource;
    // Get current sorting
    var sort = ds.sort();
    // Display sorting fields and direction
    if (sort) {
    for (var i = 0; i < sort.length; i++) {
        alert ("Field:" + sort[i].field + " direction:" + sort[i].dir);
    }
    } else {
    alert("no sorting");
   }           

});

i hope this will help you