Implementing a Custom Pager in a Grid
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Created with Product Version | 2022.2.802 |
Description
I want to implement:
- A Telerik UI Grid with a custom Pager.
- The default Pager should not be displayed.
- The custom Pager should be placed outside of the Grid.
- The numeric of the Pager should apply the changes on Enter key click, or mouse click outside of the numeric.
- Previous and next page arrows should be implemented with the default behavior.
- It is required to use some custom styles for the Pager.
Solution
- Implement a span element for the left arrow with classes: "k-icon k-i-chevron-left".
- Implement a Telerik UI NumericTextBox.
- Implement a span element for the right arrow with classes: "k-icon k-i-chevron-right".
- Implement a span element for the Pager Total info with id "total".
- Handle the click event of the left arrow.
- In the event handler, get the current page. Set the previous page to the dataSource of the Grid by using the current page. Change the value of the numeric.
- Handle the Change Event of the NumericTextBox. It is fired even when clicking outside of the input, so it is perfect for the case.
- In the Change Event handler, get the current value of the numeric and apply it to the Grid.
- Handle the click event of the right arrow.
- In the event handler, get the current page. Set the next page to the dataSource of the Grid by using the current page. Change the value of the numeric checking if the total pages are less or equal to the "next page".
- In the "document.ready" scope, use the jQuery id selector("#total") to get the total info span and change its HTML(by using the "html" method) to represent the total pages of the dataSource in the Grid.
- Add additional CSS for the arrows.
- Here is an example:
@(Html.Kendo().Grid<TelerikMvcApp3.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable(p => p.Responsive(false).Input(true))
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<br />
<br />
<h3>Choose page:</h3>
<span class="k-icon k-i-chevron-left"></span>
@(Html.Kendo().NumericTextBox<int>()
.Name("pages")
.Min(1)
.Format("#")
.Spinners(false)
.HtmlAttributes(new { style = "width: 3%", title = "pages" })
.Events(e => e.Change("onChange"))
)
<span class="k-icon k-i-chevron-right"></span>
<span id="total"></span>
function onChange() {
var grid = $("#grid").data("kendoGrid");
var currSelection = this.value();
grid.dataSource.page(currSelection);
setTimeout(function () {
var total = grid.dataSource.totalPages();
if (currSelection > total) {
var numerictextbox = $("#pages").data("kendoNumericTextBox");
numerictextbox.value(total);
}
})
}
$(document).ready(function () {
var grid = $("#grid").data("kendoGrid");
$(".k-i-chevron-left").on("click", function () {
var currentPage = grid.dataSource.page();
var previousPage = currentPage - 1;
grid.dataSource.page(previousPage);
var numerictextbox = $("#pages").data("kendoNumericTextBox");
numerictextbox.value(previousPage);
})
$(".k-i-chevron-right").on("click", function () {
var currentPage = grid.dataSource.page();
var nextPage = currentPage + 1;
grid.dataSource.page(nextPage);
var total = grid.dataSource.totalPages();
if (total >= nextPage) {
var numerictextbox = $("#pages").data("kendoNumericTextBox");
numerictextbox.value(nextPage);
}
})
setTimeout(function () {
var total = grid.dataSource.totalPages();
$("#total").html("of " + total);
})
})
.k-grid-pager {
margin-top: 100px;
width: 330px;
display: none;
}
.k-i-chevron-left {
color: mediumpurple;
font-size: 30px;
}
.k-i-chevron-right {
color: mediumpurple;
font-size: 30px;
}