Post
Ask Question

Column Virtualization in Kendo Grid with Remote Data Binding

Introduction

 
Column Virtualization is one of the major features in the Kendo grid to increase performance. It is used when there is a large amount of column/fields in the grid, and by enabling this, the columns outside the currently visible area in the grid will not be rendered, so obviously it will improve the performance. On-demand while scrolling, it will render other columns that should be visible to the user in the grid. This article will help you to learn about how this column virtualization in the Kendo grid works.
 

KendoGrid with Column 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

 
Product.cs - Create a Controller.
  1. public class Product    
  2.     {    
  3.         public int ProductID { get; set; }    
  4.         public string ProductName { get; set; }    
  5.         public double Price { get; set; }    
  6.         public double Tax { get; set; }    
  7.         public string SkuCode { get; set; }    
  8.         public string Price1 { get; set; }    
  9.         public string Price2 { get; set; }    
  10.         public string Price3 { get; set; }    
  11.         public string Price4 { get; set; }    
  12.         public string Price5 { get; set; }    
  13.         public string Price6 { get; set; }    
  14.         public string Price7 { get; set; }    
  15.         public string Price8 { get; set; }    
  16.         public string Price9 { get; set; }    
  17.         public string Price10 { get; set; }    
  18.         
  19.         public Product(int ProductID,string ProductName, double Price, double Tax,string SkuCode,string Price1,string Price2,string Price3,string Price4,string Price5,string Price6, string Price7,string Price8,string Price9,string Price10 )    
  20.         {    
  21.             this.ProductID = ProductID;    
  22.             this.ProductName = ProductName;    
  23.             this.Price = Price;    
  24.             this.Tax = Tax;    
  25.             this.SkuCode = SkuCode;    
  26.             this.Price1 = Price1;    
  27.             this.Price2 = Price2;    
  28.             this.Price3 = Price3;    
  29.             this.Price4 = Price4;    
  30.             this.Price5 = Price5;    
  31.             this.Price6 = Price6;    
  32.             this.Price7 = Price7;    
  33.             this.Price8 = Price8;    
  34.             this.Price9 = Price9;    
  35.             this.Price10 = Price10;    
  36.         }    
  37.     }   
ProductsController.cs
  1. [HttpGet]      
  2.        [Route("ProductDetails")]      
  3. public List<Product> GetProduct()      
  4.    {      
  5.        try      
  6.       {      
  7.            List<Product> products = new List<Product>      
  8.            {      
  9.                new Product(1, "Tea pack", 100, 10,"Sku100","100","100","100","100","100","100","100","100","100","100"),      
  10.                 new Product(2, "Coffee pack", 120, 12,"Sku101","100","100","100","100","100","100","100","100","100","100"),      
  11.            };      
  12.                         
  13.            return products;      
  14.        }      
  15.       catch (Exception ex)      
  16.        {      
  17.           List<Product> products = null;      
  18.           return products;      
  19.        }      
  20.    }     
    GetProduct action will return a list of products.
     
    Testing the API in Postman 
     
    /api/Products/ProductDetails
     
     
    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. 
     
    ColumnVirtualization.html 
    1. <!DOCTYPE html>    
    2. <html>  
    3.    <head>  
    4.       <title></title>  
    5.       <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />  
    6.       <script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>    
    7.       <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>    
    8.    </head>  
    9.    <body>  
    10.       <div id="example">  
    11.          <div id="grid"></div>  
    12.          <script>    
    13.             $(document).ready(function () {    
    14.                 $("#grid").kendoGrid({    
    15.                     dataSource: {    
    16.                         type: "json",    
    17.                         transport: {    
    18.                             read: "http://localhost:11207/api/Products/ProductDetails"    
    19.                         },    
    20.                                 
    21.                     },    
    22.                     scrollable: {    
    23.                        virtual: "columns"    
    24.                     },    
    25.                    navigatable: true,    
    26.                    filterable: true,    
    27.                    columnMenu: true,    
    28.                     width: 1000,    
    29.                     pageable: {    
    30.                       refresh: true,    
    31.                        pageSize: 2,    
    32.                        pageSizes: true,    
    33.                        buttonCount: 2    
    34.                    },    
    35.                     toolbar: ["search"],    
    36.                     columns: [{    
    37.                         field: "productID",    
    38.                         title: "Product ID",    
    39.                         width: 200    
    40.                             },    
    41.                         {    
    42.                         field: "productName",    
    43.                             title: "Name",    
    44.                         width: 200    
    45.                         },    
    46.                         {    
    47.                         field: "price",    
    48.                             title: "Price",    
    49.                         width: 200    
    50.                         },    
    51.                         {    
    52.                         field: "tax",    
    53.                             title: "Tax",    
    54.                         width: 200    
    55.                             },    
    56.                             {    
    57.                             field: "skuCode",    
    58.                                 title: "SkuCode",    
    59.                             width: 200    
    60.                             },    
    61.                             {    
    62.                             field: "price1",    
    63.                                 title: "Price1",    
    64.                             width: 200    
    65.                             },    
    66.                             {    
    67.                             field: "price2",    
    68.                                 title: "Price2",    
    69.                             width: 200    
    70.                             },    
    71.                             {    
    72.                             field: "price3",    
    73.                                 title: "Price3",    
    74.                             width: 200    
    75.                             },    
    76.                             {    
    77.                             field: "price4",    
    78.                                 title: "Price4",    
    79.                             width: 200    
    80.                             },    
    81.                               {    
    82.                             field: "price5",    
    83.                                   title: "Price5",    
    84.                             width: 200    
    85.                             },    
    86.                                  {    
    87.                             field: "price6",    
    88.                                 title: "Price6",    
    89.                             width: 200    
    90.                             },    
    91.                             {    
    92.                             field: "price7",    
    93.                                 title: "Price7",    
    94.                             width: 200    
    95.                             },    
    96.                             {    
    97.                             field: "price8",    
    98.                                 title: "Price8",    
    99.                             width: 200    
    100.                             },    
    101.                             {    
    102.                             field: "price9",    
    103.                                 title: "Price9",    
    104.                             width: 200    
    105.                             },    
    106.                               {    
    107.                             field: "price10",    
    108.                                   title: "Price10",    
    109.                             width: 200    
    110.                             }    
    111.               
    112.                         ]    
    113.                     });    
    114.                 });    
    115.                   
    116.          </script>    
    117.       </div>  
    118.    </body>  
    119. </html> 
      From the code given above, it is obvious that we have constructed a data source for the Kendo Grid using our API, i.e., http://localhost:11207/api/Products/ProductDetails.
       
      Set virtual as a column in scrollable property to enable column virtualization in Kendo grid.  
       
      Note
       
      To apply the column virtualization we need to define the column width.
       
      Result in Browser
       
       
      From the above image, you can observe only 7 columns are rendered in the Kendo grid, based on the user visual. 
       
      Scroll to the right and you can see the other columns will be rendered.
       
       
      Source code - GitHub 
       

      Summary

       
      We have seen how to implement the column 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