sort Array|Object

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.

Example - sort the data items

<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>

Example - sort the data items by multiple fields

<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.dir String

The sort order (direction).

The supported values are:

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

Example - specify the sort order (direction)

<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.

Example - specify the sort field

<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.compare Function

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

Example - use a custom compare function to compare items in the DataSource

<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>