Post
Ask Question

Row Virtualization In Kendo Grid With Remote Data Binding

Introduction

 
Row Virtualization is one of the major features in the Kendo grid to increase performance. It is used when there is a large number of records to be displayed in the grid. Loading a large volume of records will cause some performance issues while rendering the record. By enabling this row virtualization, it will alleviate the performance while rendering the huge volume of data. Basically, based on pageSize property value it will render the number of records to the user instead of rendering all the records.
 

KendoGrid with Row Virtualization

 
I'm going to use the following WEB API Services which are developed using ASP.NET CORE to construct the data source for Kendo grid control. If you are new to ASP.NET CORE WEB API please go through my previous article which will give you a basic idea about how to create API service using the ASP.NET CORE WEB API project.
 

Create a model class

 
ProductList.cs
  1. public class ProductList  
  2. {  
  3.     public int ProductID { get; set; }  
  4.     public string ProductName { get; set; }  
  5.     public double Price { get; set; }  
  6.              
  7.     public ProductList(int ProductID, string ProductName, double Price)  
  8.     {  
  9.         this.ProductID = ProductID;  
  10.         this.ProductName = ProductName;  
  11.         this.Price = Price;  
  12.          
  13.     }  
  14. }  
ProductsController.cs
  1. [HttpGet]  
  2.         [Route("AllProductDetails")]  
  3.         public List<ProductList> GetAllProduct()  
  4.         {  
  5.             try  
  6.             {  
  7.                 List<ProductList> products = new List<ProductList>();  
  8.                 for(int i=0;i<=1000;i++)  
  9.                 {  
  10.                     products.Add(new ProductList(1+i, "Tea Pack" + i,Convert.ToDouble(100+i )));  
  11.                 }  
  12.                   
  13.   
  14.                 return products;  
  15.             }  
  16.             catch (Exception ex)  
  17.             {  
  18.                 List<ProductList> products = null;  
  19.                 return products;  
  20.             }  
  21.         }  
GetAllProduct action will return a list of products.
 
Testing the API in Postman.
 
/api/Products/AllProductDetails
 
Row Virtualization In Kendo Grid With Remote Data Binding
 
Yes, we got the product list from the above API in JSON format. Now, our API is ready, and we will construct the KendoGrid using this API.
 

Create a HTML page 

 
KendoVirtualization.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   
  5.     <title></title>  
  6.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />  
  7.     <script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>  
  8.     <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div id="example">  
  12.         <div id="grid"></div>  
  13.         <script>  
  14.         $(document).ready(function () {  
  15.             $("#grid").kendoGrid({  
  16.                 dataSource: {  
  17.                     type: "json",  
  18.                     transport: {  
  19.                         read: "http://localhost:11207/api/Products/AllProductDetails"  
  20.                     },  
  21.                     pageSize: 10,  
  22.                 },  
  23.                 scrollable: {  
  24.                     virtual: "rows"  
  25.                 },                                  
  26.                 height: 300,  
  27.                 toolbar: ["search"],  
  28.                 columns: [{  
  29.                     field: "productID",  
  30.                     title: "Product ID",  
  31.                     width: 200  
  32.                         },  
  33.                     {  
  34.                     field: "productName",  
  35.                         title: "Name",  
  36.                     width: 200  
  37.                     },  
  38.                     {  
  39.                     field: "price",  
  40.                         title: "Price",  
  41.                     width: 200  
  42.                     },                                        
  43.                 ]  
  44.             });  
  45.         });  
  46.         </script>  
  47.     </div>  
  48. </body>  
  49. </html>  
From the above code you can observe the row virtualization is enabled using the scrollable property by defining virtual as row and we should define  a couple of key properties while enabling this row virtualization. 
  1. Height of the grid
  2. pageSize in the datasource. So, based on pageSize the number of records will be rendered.
Run the application 
 
Result in Browser
 
Row Virtualization In Kendo Grid With Remote Data Binding
 
From the above figure you can observe based on pageSize count the number of records rendered in the HTML Page. When the user scrolls down, it will load another set of records.
 
Source code - GitHub

Summary

 
We have seen how to implement the row virtualization in the Kendo grid with remote data binding, which will improve the rendering performance of the Kendo grid in the browser.
 
I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.
 
Happy Coding!


Similar Articles