JQuery

Endless Scrolling In Kendo Grid

Introduction:

This article tells you how to implement endless scrolling in Kendo Grid using remote data. Endless scrolling is one the key features in Kendo Grid which is available from Kendo R3 2017 release.

Article Flow

  • Remote Data Source For Kendo Grid
  • Building a Kendo grid with remote data source
  • Implement Endless scrolling 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 using ASP.NET CORE.

API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

Type - GET.

Testing the APIs, using POSTMAN.

 
Figure 1 

This API will give a response with 10,000 Technology list result set which is a repeated set of information and it is used just for a demo purpose.

Building a Kendo Grid with remote data source

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

KedoGridInfiniteScrolling.html

  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/TechnologiesList"  
  36.                             },  
  37.                             schema: {  
  38.                                 model: {  
  39.                                     fields: {  
  40.                                         value: { type: "number" },  
  41.                                         text: { type: "string" },  
  42.   
  43.                                     }  
  44.                                 }  
  45.                             },  
  46.                               
  47.                         },  
  48.                             numeric: false,  
  49.                             previousNext: false,  
  50.                             messages: {  
  51.                                 display: "Showing {2} data items"  
  52.                             }  
  53.                         },  
  54.                         height: 550,  
  55.                         columns: [  
  56.   
  57.                             { field: "value", title: "S No", width: "130px" },  
  58.                             { field: "text", title: "Technology", width: "130px" },  
  59.   
  60.                         ]  
  61.                     }).data("kendoGrid");  
  62.   
  63.                    
  64.                 });  
  65.         </script>  
  66.   
  67.       
  68.     </div>  
  69.   
  70.   
  71. </body>  
  72. </html>  
From the above code, you can notice that the Kendo Grid is constructed based on our remote data source which is formed from REST API.

 Result


Figure 2

Implement Endless scrolling in Kendo Grid

Endless scrolling feature is available in Kendo Grid from its latest release R3 2017.

Endless/ Infinite scrolling

  • Displays a large amount of data
  • Appends data on demand to the bottom of the View
  • Load occurs dynamically
To enable endless scrolling in Kendo Grid, we need to make endless attribute as true in scrolling property.

KedoGridInfiniteScrolling.html
  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/TechnologiesList"  
  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.                         scrollable: { endless: true }, // Enabling the kendo Endless scrollable   
  51.                         pageable: {  
  52.                             numeric: false,  
  53.                             previousNext: false,  
  54.                             messages: {  
  55.                                 display: "Showing {2} data items"  
  56.                             }  
  57.                         },  
  58.                         height: 550,  
  59.                         columns: [  
  60.   
  61.                             { field: "value", title: "S No", width: "130px" },  
  62.                             { field: "text", title: "Technology", width: "130px" },  
  63.   
  64.                         ]  
  65.                     }).data("kendoGrid");  
  66.   
  67.                    
  68.                 });  
  69.         </script>  
  70.   
  71.     </div>  
  72.   
  73.   
  74. </body>  
  75. </html>  
From the above code, you can notice that the endless attribute is enabled for scrollable.

Compatibility of endless scrolling

  • Works with both, local and remote, data.
  • Workz with grouping, hierarchy, and editing in Kendo Grid.

Result

Figure 3

After scrolling down, the rest of the data will load based on demand, as shown in the below figure.

 
Figure 4
 
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