ASP.NET MVC Changing the Grid Pager to a Slider

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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 DataBound event 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 Change event of the Slider.

When you apply this approach, the page method of the Grid's DataSource will not fire.

Index.cshtml
    @(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.js
    <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.

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also