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

Pageable.messages

configuration

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

pageable.messages

Object

<div id="listview"></div>
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
    data: [
        { name: "Item 1" },
        { name: "Item 2" },
        { name: "Item 3" },
        { name: "Item 4" },
        { name: "Item 5" }
    ],
    pageSize: 2
});

$("#listview").kendoListView({
    dataSource: dataSource,
    template: "<div class='k-listview-item'>#: name #</div>",
    pageable: {
        messages: {
            display: "Showing {0} to {1} of {2} entries",
            empty: "No records to display",
            page: "Page",
            of: "of {0}",
            itemsPerPage: "entries per page",
            first: "Go to first page",
            previous: "Go to previous page",
            next: "Go to next page",
            last: "Go to last page"
        }
    }
});
</script>

pageable.messages.display

String

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

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

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            }
          },
          pageSize: 2
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        messages: {
          display: "Showing {0}-{1} from {2} data items"
        }
      }
    }).data("kendoListView");
  });
</script>

pageable.messages.empty

String

The text displayed when the grid is empty.

Default: "No items to display"

<div id="listView"></div>

<script>
  $(document).ready(function () {
    var listView = $("#listView").kendoListView({
      dataSource: [],
      pageable: {
        messages: {
          empty: "No data"
        }
      }
    }).data("kendoListView");
  });
</script>

pageable.messages.first

String

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

Default: "Go to the first page"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 10
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        messages: {
          first: "First page"
        }
      }
    });
  });
</script>

pageable.messages.itemsPerPage

String

The label displayed after the page size DropDownList.

Default: "items per page"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 2
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        pageSizes: 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="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 10
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        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="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 1
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        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="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 10
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        messages: {
          next: "Next page"
        }
      }
    });
  });
</script>

pageable.messages.of

String

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

Default: "of {0}"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 2
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        input: true,
        messages: {
          of: "from {0}"
        }
      }
    });
  });
</script>

pageable.messages.page

String

The label displayed before the pager input.

Default: "Page"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 2
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        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="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 10
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        messages: {
          previous: "Previous page"
        }
      }
    });
  });
</script>

pageable.messages.refresh

String

The Tooltip of the refresh button.

Default: "Refresh"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 10
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        refresh: true,
        messages: {
            refresh: "Refresh the ListView"
        }
      }
    });
  });
</script>