JQuery

Append Records In Kendo Grid While Scrolling

I will use the following REST service to explain how to append the records in the kendo grid while scrolling event occurs using REST service end point: api/productsapi.

Please refer my previous article Export grid data to excel in advance Kendo UI using MVC WEB API and Entity Framework to get an idea about how to create an ASP. NET WEB API Service.

The api/productsapi service response in POSTMAN as in the following figure 1,

  
Figure 1
 
My SQL Table
 

Using a Kendo Grid without Appending Records.

Create an HTML page in your project and write the following code,

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="grid"></div>  
  19.   
  20.     <script>  
  21.         var gridElement = $("#grid")  
  22.         gridElement.kendoGrid({  
  23.             dataSource: {  
  24.                 type: "json",  
  25.                 transport: {  
  26.                     read: "api/Productsapi"  
  27.                 },  
  28.                 schema: {  
  29.                     model: {  
  30.                         fields: {  
  31.                             ProductID: { type: "number" },  
  32.                             ProductName: { type: "string" },  
  33.                             UnitPrice: { type: "string" }  
  34.                         }  
  35.                     }  
  36.                 },  
  37.                 pageSize: 5,  
  38.                            },  
  39.             pageable: true,  
  40.             dataBound: function() {  
  41.                 dataBindingFlag = true;  
  42.             },  
  43.             columns: [{  
  44.                 field:"ProductID"  
  45.             }, {  
  46.                 field: "ProductName"  
  47.             }, {  
  48.                 field: "UnitPrice",  
  49.                 title: "Unit price",  
  50.                   
  51.             }]  
  52.         });  
  53.   
  54.     </script>  
  55.   
  56.     <style>  
  57.         #grid {  
  58.             height: 270px;  
  59.         }  
  60.     </style>  
  61. </body>  
  62. </html>   

Result in browser

 
Figure 3
 

Figure 4 

The above grid is showing 5 records in each page, but in some scenarios we need the records to be append in the grid while scrolling. To achieve this we need to modify the code as shown below,

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="grid"></div>  
  19.   
  20.     <script>  
  21.         var gridElement = $("#grid")  
  22.         var pagingIncrement = 5;  
  23.         var scrollbarWidth = kendo.support.scrollbar();  
  24.         var dataBindingFlag = true;  
  25.   
  26.         gridElement.kendoGrid({  
  27.             dataSource: {  
  28.                 type: "json",  
  29.                 transport: {  
  30.                     read: "api/Productsapi"  
  31.                 },  
  32.                 schema: {  
  33.                     model: {  
  34.                         fields: {  
  35.                             ProductID: { type: "number" },  
  36.                             ProductName: { type: "string" },  
  37.                             UnitPrice: { type: "string" }  
  38.                         }  
  39.                     }  
  40.                 },  
  41.                 pageSize: 5,  
  42.                serverPaging: true  
  43.             },  
  44.             pageable: true,  
  45.             dataBound: function() {  
  46.                 dataBindingFlag = true;  
  47.             },  
  48.             columns: [{  
  49.                 field:"ProductID"  
  50.             }, {  
  51.                 field: "ProductName"  
  52.             }, {  
  53.                 field: "UnitPrice",  
  54.                 title: "Unit price",  
  55.                   
  56.             }]  
  57.         });  
  58.   
  59.         var gridDataSource = gridElement.data("kendoGrid").dataSource;  
  60.   
  61.         gridElement.children(".k-grid-content")  
  62.             .on("scroll", function(e){  
  63.                 if (dataBindingFlag) {  
  64.                     var dataDiv = e.target;  
  65.                     var currentPageSize = gridDataSource.pageSize();  
  66.                     if (dataDiv.scrollTop >= dataDiv.scrollHeight - dataDiv.offsetHeight - scrollbarWidth && gridDataSource.total() > currentPageSize) {  
  67.                         dataBindingFlag = false;  
  68.                         gridDataSource.pageSize(currentPageSize + pagingIncrement);  
  69.                     }  
  70.                 }  
  71.             });  
  72.     </script>  
  73.   
  74.     <style>  
  75.         #grid {  
  76.             height: 270px;  
  77.         }  
  78.     </style>  
  79. </body>  
  80. </html>  
From the above code it is clear we need to enable dataBindingFlag in databound function as well as we need to implement the paging logic in the scroll event.

I have defined the PageSize as 5 (shows 5 records per page in grid) and the page increment as 5, so what happens?

      - Initially it will show 5 records then while scrolling it will show rest of the records. 

Initial Request URL: http://localhost:51920/api/Productsapi?take=5&skip=0&page=1&pageSize=5 , which means the grid will take 5 records with PageSize 5. 

Result in browser
 Figure 5

After scrolling the Request URL: http://localhost:51920/api/Productsapi?take=10&skip=0&page=1&pageSize=10 , which means the grid will take 10 records with PageSize 10, so the page size is incremented from 5 to 10 as mentioned in the paging logic function,

Result in browser

Figure 6
 
I hope you have enjoyed this article.

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