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

Pageable

configuration

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.

pageable

Boolean|Object

Default: false

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

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

pageable.adaptiveMode

String

Specifies a value whether the page sizes dropdown will be adaptive. Possible values are:

none - The current page.
auto - The total number of pages.

Default: "none"

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pageable: {
      adaptiveMode: "auto",
      pageSize: 5
    }
  });
</script>

pageable.alwaysVisible

Boolean

(Available as of the Kendo UI 2017 R3 release) By default, the TreeList will render a pager even when total number of items in the DataSource is less than the pageSize value.

If set to false the TreeList will toggle the pager visibility as follows:

When the total amount of items initially set in the DataSource is less than the pageSize number, the pager will be hidden.
When the total amount of items initially set in the DataSource is greater than or equal to the pageSize number, the pager will be shown.
When the total amount of items in the DataSource becomes less than the pageSize number (after a delete or filter operation, or upon changing the pageSize), the pager will be hidden.
When the total amount of items in the DataSource becomes greater than or equal to the pageSize number (after an insert or filter operation, or upon changing the pageSize), the pager will be shown.

Default: true

<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: 10,
            alwaysVisible: false
        }
    });
</script>

pageable.buttonCount

Number

The maximum number of buttons that are displayed in the numeric pager. If more pages than the specified number are rendered, the pager will display ellipsis (...).

Default: 10

<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,
            buttonCount: 1
        }
    });
</script>

pageable.info

Boolean

If set to true, the pager will display information about the current page and the total number of data items. By default, the paging information is displayed.

Default: true

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pageable: {
      info: false
    }
  });
</script>

Example - hiding the paging information

<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,
            info: false
        }
    });
</script>

pageable.input

Boolean

If set to true, the pager will display an input element which allows the user to type a specific page number. By default, the page input is not displayed.

Avoid using pageable.input and pageable.numeric simultaneously.

Default: false

<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,
            input: true
        }
    });
</script>

pageable.messages

Object

The text messages that are displayed in the pager. Use this option to customize or localize the pager messages.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pageable: {
      messages: {
        display: "Showing {0} to {1} of {2} entries",
        empty: "No data available"
      }
    }
  });
</script>

pageable.numeric

Boolean

If set to true, the pager will display buttons for navigating to specific pages. By default, these buttons are displayed.

Avoid using pageable.numeric and pageable.input simultaneously.

Default: true

<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,
            numeric: false
        }
    });
</script>

pageable.pageSize

Number

The number of data items which will be displayed in the TreeList.

This setting will not work if the TreeList has an already existing DataSource instance.

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

pageable.pageSizes

Boolean|Array

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.

Default: false

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

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

pageable.previousNext

Boolean

If set to true, the pager will display buttons for going to the first, previous, next, and last pages. By default, these buttons are displayed.

Default: true

<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,
            previousNext: false
        }
    });
</script>

pageable.refresh

Boolean

If set to true, the pager will display the Refresh button. Clicking the Refresh button will refresh the TreeList. By default, the Refresh button is not displayed.

Default: false

<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,
            refresh: true
        }
    });
</script>

pageable.responsive

Boolean

If set to false, the pager will not be responsive. By default, the pager is responsive.

Default: false

<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,
            responsive: false
        }
    });
</script>

Related Members