JQuery

Pager Visibility In Kendo Grid

Introduction

This article tells you how to use the pager visibility in Kendo Grid with remote data. This is one of the key features in Kendo Grid, which is available from Kendo R3 2017 release.

Content

  • Remote Data Source for Kendo Grid
  • Building a Kendo Grid with remote datasource
  • Pager Visibility in Kendo Grid

Remote Data Source for Kendo Grid

I am going to use the API response given below to construct my remote data source for Kendo Grid which was created in my previous article.

  • API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesLimitedList
  • Type - GET.

 Test the APIs using POSTMAN.

 
Figure 1 

Build a Kendo Grid with remote datasource

Create a new HTML page. In my case, I named it KendoPaging.cshtml

KendoPaging.cshtml
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.   
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.                 $(document).ready(function() {  
  29.   
  30.   
  31.                     var grid = $("#grid").kendoGrid({  
  32.                         dataSource: {  
  33.                             type: "json",  
  34.                             transport: {  
  35.                                read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesLimitedList"  
  36.                                  
  37.                             },  
  38.                             schema: {  
  39.                                 model: {  
  40.                                     fields: {  
  41.                                         value: { type: "number" },  
  42.                                         text: { type: "string" },  
  43.   
  44.                                     }  
  45.                                 }  
  46.                             },  
  47.                            pageSize: 20,  
  48.   
  49.                         },  
  50.                          
  51.                         pageable: {  
  52.                             refresh: true,  
  53.                             pageSizes: [20, 40, 60, 80,100],    
  54.                             
  55.                         },  
  56.                        height: 500,  
  57.                         columns: [  
  58.   
  59.                             { field: "value", title: "S No", width: "130px" },  
  60.                             { field: "text", title: "Technology", width: "130px" },  
  61.   
  62.                         ]  
  63.                     }).data("kendoGrid");  
  64.   
  65.   
  66.                 });  
  67.         </script>  
  68.   
  69.       
  70.     </div>  
  71.   
  72.   
  73. </body>  
  74. </html>  

From the above code, you can notice that the Kendo Grid is constructed based on our remote datasource which is formed from REST API.

Result
 
 
Figure 2 

Pager Visibility in Kendo Grid

Pager Visibility attribute in a page-able property is used to make the pager visible or not, based on its requirement, just by changing the status of the attribute.

By default, the pager visibility will be true, which means that the pager is always visible in Grid even when the total amount of items in the datasource is less than a pageSize.

The Pager will be hidden when the total amount of items in the datasource is less than pageSize, by setting pager visibility as false.

Result
 
 
FIgure 3
 
So, by default, the pager alwaysVisible attribute is true .
 
Making alwaysVisible as false. 
  
KendoPaging.cshtml
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.   
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.                 $(document).ready(function() {  
  29.   
  30.   
  31.                     var grid = $("#grid").kendoGrid({  
  32.                         dataSource: {  
  33.                             type: "json",  
  34.                             transport: {  
  35.                                read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesLimitedList"  
  36.                                  
  37.                             },  
  38.                             schema: {  
  39.                                 model: {  
  40.                                     fields: {  
  41.                                         value: { type: "number" },  
  42.                                         text: { type: "string" },  
  43.   
  44.                                     }  
  45.                                 }  
  46.                             },  
  47.                            pageSize: 20,  
  48.   
  49.                         },  
  50.                          
  51.                         pageable: {  
  52.                             refresh: true,  
  53.                             alwaysVisible:false,  
  54.                             pageSizes: [20, 40, 60, 80,100],    
  55.                             
  56.                         },  
  57.                        height: 500,  
  58.                         columns: [  
  59.   
  60.                             { field: "value", title: "S No", width: "130px" },  
  61.                             { field: "text", title: "Technology", width: "130px" },  
  62.   
  63.                         ]  
  64.                     }).data("kendoGrid");  
  65.   
  66.   
  67.                 });  
  68.         </script>  
  69.   
  70.       
  71.     </div>  
  72.   
  73.   
  74. </body>  
  75. </html>  
Result
 
 
Figure 4
 
From the above figure, you can notice that the pager is hidden once the total number of items in datasource is less than a pageSize. 
 
Reference
 
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

Download the source code here.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs