CODEWITHSUNDEEP
kendo-uikendo-grid
user3988645
user3988645

Reputation: 135

Event called when sorting data in kendo grid

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?

Upvotes: 4

Views: 11010

Answers (4)

nshouppuohsn
nshouppuohsn

Reputation: 119

I was using jQuery to hide columns, I was not able to use kendo's hideColumn and showColumn functions. When sorting I would end up with a column I wanted hidden showing up after the sort event was fired. I found that using the above mentioned block then writing a function using jQuery to show or hide the column worked like I intended things to.

    $(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(){
                   if(_checkBox.is(':checked'){
                      grid.find("table th").eq(4).show();   
                      grid.children("div:eq(1)").find("table").find("tr").each(function () {
                         $(this).children("td:eq(4)").show();
                  });
               }
             });

Might want to check your formatting with this one too.

Upvotes: 0

Brad Westness
Brad Westness

Reputation: 1572

You could define a custom sort function for each of your columns and fire your whenSorting event from there, like this:

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

  function whenSorting(a, b){
     //// DO SOMETIME......

    return a == b
      ? 0
      : a > b
        ? 1
        : -1;
  }
 });

Upvotes: 0

cwishva
cwishva

Reputation: 1978

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

Upvotes: 7

Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

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

Upvotes: 1

Related Questions