pageable.pageSizes Boolean|Array (default: false)

If set to true, the pager will display a drop-down which allows the user to pick a page size. By default, the drop-down for the page size is not displayed. Can be set to an array of predefined page sizes to override the default list. The TreeList supports a special all value which sets the page size to the total number of records. If you set a pageSize for the data source, then this value will be selected initially.

Example - showing the drop-down list for the page size

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
          { field: "id" },
          { field: "name" }
        ],
        dataSource: {
            data: [
              { id: 1, parentId: null, name: "item 1" },
              { id: 2, parentId: 1, name: "item 2" },
              { id: 3, parentId: 1, name: "item 3" },
              { id: 4, parentId: 1, name: "item 4" },
            ]
        },
        pageable: {
            pageSize: 2,
            pageSizes: true
        }
    });
</script>

Example - specifyinging the page sizes as an array

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
          { field: "id" },
          { field: "name" }
        ],
        dataSource: {
            data: [
              { id: 1, parentId: null, name: "item 1" },
              { id: 2, parentId: 1, name: "item 2" },
              { id: 3, parentId: 1, name: "item 3" },
              { id: 4, parentId: 1, name: "item 4" },
            ]
        },
        pageable: {
            pageSize: 2,
            pageSizes: [2, 3, 4, "all"],
            numeric: false
        }
    });
</script>
In this article
Not finding the help you need? Improve this article