messages Object

Defines texts shown within the pager. Use this option to customize or localize the pager messages.

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

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        display: "Showing {0}-{1} from {2} data items"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

The text displayed when the DataSource view does no contain items.

Example - set the "empty" message

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        empty: "No data"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

messages.allPages String(default: "All"),

The text displayed for the item that represents the allPages option when allPages is enabled.

Example - set the label before the pager input

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      numeric: false,
      pageSizes: [ 2, 3, 'all'],
      messages: {
        allPages: "See All"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

messages.numbersSelectLabel String(default: "Page select")

The label applied to the Pager select element (when visible).

Example - reduce view width to see the Pager select

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" },
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" },
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 1
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        numbersSelectLabel: "Select page number"
      }
    });

    dataSource.read();
</script>

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

The label displayed before the pager input.

Example - set the label before the pager input

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      input: true,
      numeric: false,
      messages: {
        page: "Enter page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

messages.pageButtonLabel String(default: "Page {0}"),

The title of the numeric link page buttons of the Pager. The parameters available for the template are:

  • page - The page that will becomes selected when clicking the button.

Example - set the label before the pager input

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      input: true,
      numeric: false,
      messages: {
        pageButtonLabel: "This is page {0}"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

messages.pageSizeDropDownLabel String(default: "Page sizes drop down")

The label applied to the page size DropDOwnList.

Example

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      input: true,
      numeric: false,
      messages: {
        pageSizeDropDownLabel: "page size"
      },
      pageSizes: [1, 2, 5]
    });

    dataSource.read();
</script>

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="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      input: true,
      numeric: false,
      messages: {
        of: "from {0}"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      pageSizes: true,
      numeric:false,
      messages: {
        itemsPerPage: "data items per page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

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

Example - set the tooltip of the first page button

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2,
      page: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        first: "First Page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

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

Example - set the tooltip of the previous page button

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2,
      page: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        previous: "Previous Page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

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

Example - set the tooltip of the next page button

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        next: "Next Page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

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

Example - set the tooltip of the last page button

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        last: "Last Page"
      }
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>

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

The tooltip of the refresh button.

Example - set the tooltip of the refresh button

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    $("#pager").kendoPager({
      dataSource: dataSource,
      messages: {
        refresh: "Refresh data"
      },
      refresh: true
    });

    dataSource.read();
</script>
<style>
  #pager {
   margin-top: 100px;
  }
</style>
In this article
Related articles
Not finding the help you need? Improve this article