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

Sortable

configuration

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.

Can be set to a JavaScript object which represents the sorting configuration.

sortable.allowUnsort

Boolean

If set to true the user can get the grid in unsorted state by clicking the sorted column header.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sortable: {
    allowUnsort: false
  }
});
</script>

sortable.initialDirection

String

Determines the inital (from un-sorted to sorted state) sort direction. The supported values are asc and desc.

Default: asc

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" }
  ],
  sortable: {
    initialDirection: "desc"
  },
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

The sorting mode. If set to "single" the user can sort by one column. If set to "multiple" the user can sort by multiple columns. And the "mixed" mode enables you to sort in single mode when clicking and switch to multiple when holding ctrl key.

Default: "single"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sortable: {
    mode: "multiple"
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sortable: {
    mode: "mixed",
    allowUnsort: true,
    showIndexes: true
  }
});
</script>

sortable.showIndexes

Boolean

If set to true the user will see sort sequence indicators for sorted columns.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sortable: {
    showIndexes: true,
    mode: "multiple"
  }
});
</script>

Sortable

sortable

sortable.allowUnsort

sortable.initialDirection

sortable.mode

sortable.showIndexes