Changing the Grid Pager to a Slider

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.1.117 version

Description

How can I change the default pager of the Telerik UI for ASP.NET Core Grid to a slider?

Solution

To achieve the desired result:

1. Handle the DataBound event in order to remove the default pager buttons.
2. To substitute the default pager, create a Kendo UI Slider widget instance in its place.
3. To prevent the Kendo UI Slider from creating numerous times, declare a flag variable.
4. 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.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Change the Grid Pager to a Slider
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base