sortable Boolean|Object (default: false)

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.

Example - enabling sorting

<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 (default: true)

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

Example - preventing unsorting

<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 (default: "single")

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.

Example - allowing the multiple column sort mode

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