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

Pageable.messages

configuration

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

pageable.messages

Object

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

String

The text with the pager information. Uses kendo.format.

Contains the following placeholders:

{0} - The first data item index.
{1} - The last data item index.
{2} - The total number of data items.

Default: "{0} - {1} of {2} items"

<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,
            messages: {
                display: "Showing {0}-{1} from {2} data items"
            }
        }
    });
</script>

pageable.messages.empty

String

The text that is displayed when the TreeList is empty.

Default: "No items to display"

<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,
            messages: {
                empty: "No data"
            }
        }
    });
</script>

pageable.messages.first

String

The tooltip of the button which goes to the first page.

Default: "Go to the first page"

<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,
            messages: {
                first: "First page"
            }
        }
    });
</script>

pageable.messages.itemsPerPage

String

The label that is displayed after the drop-down list for the page size.

Default: "items per page"

<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: {
            pageSizes: [2, 5],
            input: true,
            messages: {
                itemsPerPage: "data items per page"
            }
        }
    });
</script>

pageable.messages.last

String

The tooltip of the button which goes to the last page.

Default: "Go to the last page"

<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,
            messages: {
                last: "Last page"
            }
        }
    });
</script>

pageable.messages.morePages

String

The tooltip of the ... (ellipsis) button which appears when the number of pages is greater than the buttonCount.

Default: "More pages"

<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: 1,
          buttonCount: 2,
          refresh: true,
          messages: {
              morePages: "More pages"
          }
        }
    });
</script>

pageable.messages.next

String

The tooltip of the button which goes to the next page.

Default: "Go to the next page"

<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,
            messages: {
                next: "Next page"
            }
        }
    });
</script>

pageable.messages.of

String

The label that is displayed before the pager input. Uses kendo.format. Contains one optional {0} placeholder which represents the total number of pages.

Default: "of {0}"

<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,
            messages: {
                of: "from {0}"
            }
        }
    });
</script>

pageable.messages.page

String

The label that is displayed before the pager input.

Default: "Page"

<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,
            messages: {
                page: "Enter page"
            }
        }
    });
</script>

pageable.messages.previous

String

The tooltip of the button which goes to the previous page.

Default: "Go to the previous page"

<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,
            messages: {
                previous: "Previous page"
            }
        }
    });
</script>

pageable.messages.refresh

String

The tooltip of the Refresh button.

Default: "Refresh"

<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,
            messages: {
                refresh: "Refresh the treelist"
            }
        }
    });
</script>