New to Kendo UI for jQuery? Start a free 30-day trial

Sort

configuration

The sort order which will be applied over the data items. By default, the data items are not sorted.

The data source sorts the data items client-side unless the serverSorting option is set to true.

sort

Array|Object

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(data[0].age); // displays "33"
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  sort: [
    // sort by "category" in descending order and then by "name" in ascending order
    { field: "category", dir: "desc" },
    { field: "name", dir: "asc" }
  ]
});
dataSource.fetch(function(){
  var data = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(data[1].name); // displays "Coffee"
});
</script>

sort.compare

Function

Function which can be used for custom comparing of the DataSource items.

<div id="grid"></div>
<script>
  var numbers = {
    "one"  : 1,
    "two"  : 2,
    "three": 3,
    "four" : 4,
  };

  var dataSource = new kendo.data.DataSource({
    data: [
      { id: 1, item: "two" },
      { id: 2, item: "one" },
      { id: 3, item: "three" },
      { id: 4, item: "four" }
    ],
    sort: { field: "item", dir: "asc", compare: function(a, b) {
      return numbers[a.item] - numbers[b.item];
    }
          }
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    columns: [{
      field: "item",
      sortable: {
        compare: function(a, b) {
          return numbers[a.item] - numbers[b.item];
        }
      }
    }]
  });
</script>

sort.dir

String

The sort order (direction).

The supported values are:

"asc" (ascending order)
"desc" (descending order)

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  // order by "age" in descending order
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(data[0].age); // displays "33"
});
</script>

sort.field

String

The field by which the data items are sorted.

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  // order by "age" in descending order
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(data[0].age); // displays "33"
});
</script>