Changing the Grid Pager to a Slider
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.1.117 version |
Description
How can I change the default pager of the Telerik UI for ASP.NET MVC Grid to a slider?
Solution
To achieve the desired result:
- Handle the
DataBoundevent in order to remove the default pager buttons. - To substitute the default pager, create a Kendo UI Slider widget instance in its place.
- To prevent the Kendo UI Slider from creating numerous times, declare a flag variable.
- Change the page of the Grid DataSource by handling the
Changeevent of the Slider.
When you apply this approach, the
pagemethod of the Grid's DataSource will not fire.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.Events(events => events.DataBound("onDataBound"))
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
<script type="text/javascript">
var sliderCreated = false; // Flag variable.
function onChange(e){
var grid = $("#grid").data("kendoGrid"); // Obtain the Grid's reference.
grid.dataSource.page(e.value); // Change the DataSource's page.
}
function onDataBound(e){
if(!sliderCreated){ // Assert if the Slider is created.
sliderCreated = true; // Change the flag variable.
var max = e.sender.dataSource.totalPages(); // Get the total number of pages.
$(".k-grid-pager").find("a, ul").each(function(i) { // Find the Grid's pager and remove it.
$(this).remove()
});
$(".k-grid-pager").prepend($("<input id='slider' />")); // Create the Slider.
$("#slider").kendoSlider({
min: 1,
max: max,
tickPlacement: "none",
change: onChange
});
}
}
</script>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on changing the Grid pager to a slider.