Edit this page

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.

Important

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

Example
<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

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy