How to get kendo ui grid sort event?

Question

I currently have a Kendo-UI grid. It has a few column where user can sort on, works great. I also have a details link on each row, so if the user clicks on this they are taken to a details page. I need to pass the current sort into the details page as a value. How can I get the current sort? is there an event I can bind to? Thanks

Solution 1

You can get the sorting configuration whenever you want using sort method.

Example: Being grid the id of your Grid. Do:

// 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");
}

Solution 2

I ran into this need today and learned that the event is now present as of 2016 R3 release (2016.3.914).

Example usage:

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
 ],
dataSource: {
  data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
     ],
     schema: {
       model: { id: "id" }
     }
   },
   sortable: true,
    sort: function(e) {
      console.log(e.sort.field);
      console.log(e.sort.dir);
    }
  });
</script>

See: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-sort

Comments

[user2206329]

but how do I know which column sort has been clicked? if its descending or ascending? ie If I have 4 columns. I sort on Column 3 desc. how do I know that?

[user2206329]

that is exactly what I was looking for.. thank you for that. Do you know how to get the value of the row number of a clicked row? if I click on the 5th row for it to alert 5.. or if I go to the 4th page and click on the 5th item for it to alert 45?

[OnaBai]

As a general recommendation, you should not ask a new question in a comment since the chances for others to read it are pretty low. Said that, you should use dataSource.indexOf of the item corresponding to the clicked row, and you know the row using something like grid.dataItem($(this).closest("tr")); inside the handler of the click event.

[user2206329]

Cool, the only issue with that is once the sort has been applied the id is still the same. I would have expected the first item to be index of 1. But when the items are sorted by desc the first item is 1200. I just want a row number for each row regardless of the sort. thanks for that I will post this up as a new discussion. But it is so hard to post a question on stack flow. It keeps saying the question does not pass their validation.

[user2206329]

I got it to work by doing the following. var rowValue = $(e.target).closest("tr").index() + 1; var page = (ds._page - 1) * ds._pageSize; var currentItem = rowValue + page; where ds is the data source. It works. Is this ok? or is there a better method?

[jtromans]

Is there an event that is fired when a column has been sorted?

[OnaBai]

@jtromans, not sure if this is what you are looking for, check columnReorder

[jtromans]

@OnaBai Thanks but this is when the order of the columns is changed. I meant when the column is sorted from, say, ASC to DESC.

[OnaBai]

@jtromans then there is no specific event, you should use dataBound.