Change Grid Pager to Slider

The following example demonstrates how to change the default pager of the Grid to a slider.

To achieve this behavior:

  1. Remove the default pager buttons on the first dataBound event.
  2. Create a Kendo UI Slider in their place.
  3. Change the page of the Grid DataSource on the change event of the Slider.

When you apply this approach, the page method of the Grid does not fire.

<div id="grid"></div>

<script>
  var sliderCreated = false;  

  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" },
      { productName: "Cheese", category: "Food" },
      { productName: "Milk", category: "Beverages" }
    ],
    pageable: {
      pageSize: 2
    },
    dataBound: onDataBound
  });

  function onChange(e){
    var grid = $("#grid").data("kendoGrid");

    grid.dataSource.page(e.value)
  };

  function onDataBound(e){
    if(!sliderCreated){
      sliderCreated = true;
      var max = e.sender.dataSource.totalPages();


      $(".k-grid-pager").find("a, ul").each(function(i) {
        $(this).remove()
      });
      $(".k-grid-pager").prepend($("<input id='slider' />"));
      $("#slider").kendoSlider({
        min: 1,
        max: max,
        tickPlacement: "none",
        change: onChange
      });
    }
  };
</script>

<style>
  #grid .k-slider-horizontal{
    margin: 0.4em 0.4em 0 0.4em;
  }  
</style>

See Also

In this article
Not finding the help you need? Improve this article