messagesObject
Defines texts shown within the pager. Use this option to customize or localize the pager messages.
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" 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.emptyString(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.allPagesString(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.pageString(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.pageButtonLabelString(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.pageSizeDropDownLabelString(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.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="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.itemsPerPageString(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.firstString(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.previousString(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.nextString(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.lastString(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.refreshString(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