pageable.messages Object

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

pageable.messages.display String (default: "{0} - {1} of {2} items"),

The pager info text. Uses kendo.format.

Contains three placeholders:

• {0} - the first data item index
• {1} - the last data item index
• {2} - the total number of data items

Example - set the "display" pager message

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      display: "Showing {0}-{1} from {2} data items"
    }
  }
});
</script>

pageable.messages.empty String (default: "No items to display"),

The text displayed when the grid is empty.

Example - set the "empty" pager message

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
  ],
  pageable: {
    pageSize: 2,
    messages: {
      empty: "No data"
    }
  }
});
</script>

pageable.messages.page String (default: "Page"),

The label displayed before the pager input.

Example - set the label before the pager input

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    input: true,
    messages: {
      page: "Enter page"
    }
  }
});
</script>

pageable.messages.of String (default: "of {0}"),

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

Example - set the label after the pager input

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    input: true,
    messages: {
      of: "from {0}"
    }
  }
});
</script>

pageable.messages.itemsPerPage String (default: "items per page"),

The label displayed after the page size DropDownList.

Example - set the label after the page size DropDownList

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    pageSizes: true,
    messages: {
      itemsPerPage: "data items per page"
    }
  }
});
</script>

pageable.messages.first String (default: "Go to the first page"),

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

Example - set the Tooltip of the first page button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      first: "First page"
    }
  }
});
</script>

pageable.messages.last String (default: "Go to the last page"),

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

Example - set the Tooltip of the last page button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      last: "Last page"
    }
  }
});
</script>

pageable.messages.next String (default: "Go to the next page"),

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

Example - set the Tooltip of the next page button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      next: "Next page"
    }
  }
});
</script>

pageable.messages.previous String (default: "Go to the previous page"),

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

Example - set the Tooltip of the previous page button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      previous: "Previous page"
    }
  }
});
</script>

pageable.messages.refresh String (default: "Refresh"),

The Tooltip of the refresh button.

Example - set the Tooltip of the refresh button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 2,
    refresh: true,
    messages: {
      refresh: "Refresh the grid"
    }
  }
});
</script>

pageable.messages.morePages String (default: "More pages"),

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

Example - set the Tooltip of the ellipsis button

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  pageable: {
    pageSize: 1,
    buttonCount: 2,
    refresh: true,
    messages: {
      morePages: "More pages"
    }
  }
});
</script>