pageable.messagesObject

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

pageable.messages.displayString(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.emptyString(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.pageString(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.ofString(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.itemsPerPageString(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.firstString(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.lastString(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.nextString(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.previousString(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.refreshString(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.morePagesString(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>