sortable Boolean|Object (default: false)

If set to true the user could 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 - enable 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 - do not allow 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 sorting 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 - allow multiple column sorting

<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>
In this article
Not finding the help you need?