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

Sortable

configuration

If set to true, the user is able to sort the TreeList by clicking the column header cells. By default, sorting is disabled. Can be set to a JavaScript object which represents the sorting configuration.

sortable

Boolean|Object

Default: false

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: true,
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ]
  });
</script>

sortable.allowUnsort

Boolean

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

Default: true

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      allowUnsort: false
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ],
      sort: { field: "name", dir: "asc" }
    }
  });
</script>

sortable.mode

String

The sort mode. If set to single, the user can sort by one column at a time. If set to multiple, the user can sort by multiple columns.

Default: "single"

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 },
        { id: 4, parentId: 1, name: "John Doe", age: 22 }
      ],
      sort: { field: "name", dir: "asc" }
    }
  });
</script>