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

public class ProductList
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public double Price { get; set; }
public ProductList(int ProductID, string ProductName, double Price)
{
this.ProductID = ProductID;
this.ProductName = ProductName;
this.Price = Price;
}
}

ProductsController.cs

[HttpGet]
[Route("AllProductDetails")]
public List<ProductList> GetAllProduct()
{
try
{
List<ProductList> products = new List<ProductList>();
for(int i=0;i<=1000;i++)
{
products.Add(new ProductList(1+i, "Tea Pack" + i,Convert.ToDouble(100+i )));
}
return products;
}
catch (Exception ex)
{
List<ProductList> products = null;
return products;
}
}

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

<!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/AllProductDetails"
},
pageSize: 10,
},
scrollable: {
virtual: "rows"
},
height: 300,
toolbar: ["search"],
columns: [{
field: "productID",
title: "Product ID",
width: 200
},
{
field: "productName",
title: "Name",
width: 200
},
{
field: "price",
title: "Price",
width: 200
},
]
});
});
</script>
</div>
</body>
</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.

Height of the grid
pageSize in the datasource. So, based on pageSize the number of records will be rendered.

Run the application

Result in Browser

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!