Toggle page button for Kendo Grid

[Benjamin]

the default number of page buttons is currently 10.

would like to know if it is possible to change to 5 buttons when it is detected that the user is surfing the page on mobile?

[Patrick | Technical Support Engineer, Senior]

Hi Benjamin,

The Kendo UI Grid's pager can be configured as responsive to handle different device window widths.  That bein said, if you would like to change the button count to 5 when the width is a certain point, set the pageable.buttonCount accordingly:

JavaScript

        $(document).ready(function () {
          var responsive = true;
          var buttonCount = 5;

          //Based on window outerwidth
          //set buttonCount and responsiveness
          if (window.outerWidth > 1000) {
            responsive = false;
            var buttonCount = 10;
          }

          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
              },
              pageSize: 5
            },
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
              refresh: true,
              pageSizes: true,
              buttonCount: buttonCount,
              responsive: responsive
            },
            columns: [{
              field: "ContactName",
              title: "Contact Name",
              width: 240
            }, {
              field: "ContactTitle",
              title: "Contact Title"
            }, {
              field: "CompanyName",
              title: "Company Name"
            }, {
              field: "Country",
              width: 150
            }]
          });
        });

Please take a look at the following Progress Kendo UI Dojo for an example of the pager implementation above.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Benjamin]

hi Patrick

thanks for the reply. 

tried the dojo and saw it is able to do what I wanted.

but is it possible to do the changing of buttoncount during the window resize event and also not reinitialise the grid?

 

eg:

$( window ).resize(function() {
        grid.data("kendoGrid").pageable.buttonCount=5;
});

where grid is a global variable set when the grid get initialised during document ready

[Patrick | Technical Support Engineer, Senior]

This can be done by using the Grid's setOptions method within a setTimeout:

          function resizeGrid() {
            
            //Resizes Grid
            gridElement.data("kendoGrid").resize();
            
            //Using setTimeout for due to timing of actions
            setTimeout(function(){
              
              //Based on window outerwidth
              if (window.outerWidth > 1000) {

                //Sets pageable.buttonCount to 10
                gridElement.data("kendoGrid").setOptions({
                  pageable: {
                    buttonCount: 10
                  }
                });


              } else {

                //Sets pageable.buttonCount to 15
                gridElement.data("kendoGrid").setOptions({
                  pageable: {
                    buttonCount: 5
                  }
                });

              }
              
            }, 0);
          }

          //On Window resize
          $(window).resize(function(){
            resizeGrid();
          });

Here's a Progress Kendo UI Dojo with the approach above.  Hope that helps out!