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.

public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public double Price { get; set; }
public double Tax { get; set; }
public string SkuCode { get; set; }
public string Price1 { get; set; }
public string Price2 { get; set; }
public string Price3 { get; set; }
public string Price4 { get; set; }
public string Price5 { get; set; }
public string Price6 { get; set; }
public string Price7 { get; set; }
public string Price8 { get; set; }
public string Price9 { get; set; }
public string Price10 { get; set; }
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 )
{
this.ProductID = ProductID;
this.ProductName = ProductName;
this.Price = Price;
this.Tax = Tax;
this.SkuCode = SkuCode;
this.Price1 = Price1;
this.Price2 = Price2;
this.Price3 = Price3;
this.Price4 = Price4;
this.Price5 = Price5;
this.Price6 = Price6;
this.Price7 = Price7;
this.Price8 = Price8;
this.Price9 = Price9;
this.Price10 = Price10;
}
}

ProductsController.cs

[HttpGet]
[Route("ProductDetails")]
public List<Product> GetProduct()
{
try
{
List<Product> products = new List<Product>
{
new Product(1, "Tea pack", 100, 10,"Sku100","100","100","100","100","100","100","100","100","100","100"),
new Product(2, "Coffee pack", 120, 12,"Sku101","100","100","100","100","100","100","100","100","100","100"),
};
return products;
}
catch (Exception ex)
{
List<Product> products = null;
return products;
}
}

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "http://localhost:11207/api/Products/ProductDetails"
},
},
scrollable: {
virtual: "columns"
},
navigatable: true,
filterable: true,
columnMenu: true,
width: 1000,
pageable: {
refresh: true,
pageSize: 2,
pageSizes: true,
buttonCount: 2
},
toolbar: ["search"],
columns: [{
field: "productID",
title: "Product ID",
width: 200
},
{
field: "productName",
title: "Name",
width: 200
},
{
field: "price",
title: "Price",
width: 200
},
{
field: "tax",
title: "Tax",
width: 200
},
{
field: "skuCode",
title: "SkuCode",
width: 200
},
{
field: "price1",
title: "Price1",
width: 200
},
{
field: "price2",
title: "Price2",
width: 200
},
{
field: "price3",
title: "Price3",
width: 200
},
{
field: "price4",
title: "Price4",
width: 200
},
{
field: "price5",
title: "Price5",
width: 200
},
{
field: "price6",
title: "Price6",
width: 200
},
{
field: "price7",
title: "Price7",
width: 200
},
{
field: "price8",
title: "Price8",
width: 200
},
{
field: "price9",
title: "Price9",
width: 200
},
{
field: "price10",
title: "Price10",
width: 200
}
]
});
});
</script>
</div>
</body>
</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!