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" />
  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>
  20. </head>
  21. <body>
  24. <div id="example">
  25. <div id="grid"></div>
  27. <script>
  28. $(document).ready(function() {
  31. var grid = $("#grid").kendoGrid({
  32. dataSource: {
  33. type: "json",
  34. transport: {
  35. read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesLimitedList"
  37. },
  38. schema: {
  39. model: {
  40. fields: {
  41. value: { type: "number" },
  42. text: { type: "string" },
  44. }
  45. }
  46. },
  47. pageSize: 20,
  49. },
  51. pageable: {
  52. refresh: true,
  53. pageSizes: [20, 40, 60, 80,100],
  55. },
  56. height: 500,
  57. columns: [
  59. { field: "value", title: "S No", width: "130px" },
  60. { field: "text", title: "Technology", width: "130px" },
  62. ]
  63. }).data("kendoGrid");
  66. });
  67. </script>
  70. </div>
  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" />
  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>
  20. </head>
  21. <body>
  24. <div id="example">
  25. <div id="grid"></div>
  27. <script>
  28. $(document).ready(function() {
  31. var grid = $("#grid").kendoGrid({
  32. dataSource: {
  33. type: "json",
  34. transport: {
  35. read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesLimitedList"
  37. },
  38. schema: {
  39. model: {
  40. fields: {
  41. value: { type: "number" },
  42. text: { type: "string" },
  44. }
  45. }
  46. },
  47. pageSize: 20,
  49. },
  51. pageable: {
  52. refresh: true,
  53. alwaysVisible:false,
  54. pageSizes: [20, 40, 60, 80,100],
  56. },
  57. height: 500,
  58. columns: [
  60. { field: "value", title: "S No", width: "130px" },
  61. { field: "text", title: "Technology", width: "130px" },
  63. ]
  64. }).data("kendoGrid");
  67. });
  68. </script>
  71. </div>
  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.