Append Records In Kendo Grid While Scrolling

Gowtham K
9y
5.6k
0
0

Article

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,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var gridElement = $("#grid")
gridElement.kendoGrid({
dataSource: {
type: "json",
transport: {
read: "api/Productsapi"
},
schema: {
model: {
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
pageSize: 5,
},
pageable: true,
dataBound: function() {
dataBindingFlag = true;
},
columns: [{
field:"ProductID"
}, {
field: "ProductName"
}, {
field: "UnitPrice",
title: "Unit price",
}]
});
</script>
<style>
#grid {
height: 270px;
}
</style>
</body>
</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,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var gridElement = $("#grid")
var pagingIncrement = 5;
var scrollbarWidth = kendo.support.scrollbar();
var dataBindingFlag = true;
gridElement.kendoGrid({
dataSource: {
type: "json",
transport: {
read: "api/Productsapi"
},
schema: {
model: {
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
pageSize: 5,
serverPaging: true
},
pageable: true,
dataBound: function() {
dataBindingFlag = true;
},
columns: [{
field:"ProductID"
}, {
field: "ProductName"
}, {
field: "UnitPrice",
title: "Unit price",
}]
});
var gridDataSource = gridElement.data("kendoGrid").dataSource;
gridElement.children(".k-grid-content")
.on("scroll", function(e){
if (dataBindingFlag) {
var dataDiv = e.target;
var currentPageSize = gridDataSource.pageSize();
if (dataDiv.scrollTop >= dataDiv.scrollHeight - dataDiv.offsetHeight - scrollbarWidth && gridDataSource.total() > currentPageSize) {
dataBindingFlag = false;
gridDataSource.pageSize(currentPageSize + pagingIncrement);
}
}
});
</script>
<style>
#grid {
height: 270px;
}
</style>
</body>
</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

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all