pageable Boolean|Object (default: false)

If set to true, the TreeList displays a pager. By default, paging is disabled. Only client-side paging is supported which means that all data items are expected to be available when the TreeList is initialized. Can be set to a JavaScript object which represents the pager configuration.

Set a pageSize no matter if paging is performed on the client or on the server. A pageSize can be defined in the pageable settings, or in the dataSource settings.

Example - enabling paging

<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
        }
    });
</script>

If client-side paging is used with editing, an item is added, and the id field of the model has to be nullable, then you have to configure the model to a default id field value on the client-side that is different from the default parentId field value. This approach is required because root TreeList items have their parentId field set to the default value for no parent which, by default, is equal to null but can be configured from the dataSource.schema.model.fields[FIELD_NAME].defaultValue option. In such cases, the default value of the id field (null) will be equal to the default parentId field value (null) which creates a circular dependency. You can set the default id field to a different value instead, for example, zero.

Example - setting id values that are different from parentId values

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
          { field: "id" },
          { field: "name" }
        ],
        editable: "incell",
        toolbar: ["create"],
        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" },
            ],
            schema: {
                model: {
                    fields: {
                        id: {
                            type: "number",
                            defaultValue: 0
                        }
                    }
                }
            }
        },
        pageable: {
            pageSize: 2
        }
    });
</script>
In this article
Related articles
Not finding the help you need? Improve this article