When working with large data in web applications, displaying data in a simple HTML table becomes difficult.
We need features like:
- Paging
- Sorting
- Filtering
- Endless scrolling
- Searching
To solve this problem, developers use Kendo UI Grid.
Kendo Grid is one of the most popular UI components used in ASP.NET MVC and jQuery applications.
In this article, you will learn:
- What Kendo Grid is
- Why we use it
- Important grid properties
- Endless scrolling
- Fetching 50-50 records
- Real examples with explanation
What is Kendo Grid?
Kendo Grid is a powerful table component provided by Progress Telerik.
It helps display data with advanced features using less code.
Why Use Kendo Grid?
- Professional UI
- Easy data handling
- Built-in paging & filtering
- Fast development
Step 1: Add Kendo UI Files
<link href="https://kendo.cdn.telerik.com/2024.1.130/styles/kendo.default-v2.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
Step 2: Create HTML Div
<div id="grid"></div>
Step 3: Create Grid
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Home/GetStudents",
dataType: "json"
}
},
pageSize: 50
},
height: 550,
pageable: true,
sortable: true,
filterable: true,
scrollable: true,
columns: [
{ field: "StudentId", title: "ID", width: 100 },
{ field: "StudentName", title: "Name" },
{ field: "City", title: "City" }
]
});
Output
Grid features:
- Paging
- Sorting
- Filtering
- Scrollable grid
Important Kendo Grid Properties Explained
pageable
pageable: true
Enables pagination
sortable
sortable: true
Allows column sorting
filterable
filterable: true
Adds filter option
scrollable
scrollable: true
Enables scrolling
groupable
groupable: true
Group data by column
selectable
selectable: true
Select row
resizable
resizable: true
Resize columns
reorderable
reorderable: true
Change column order
editable
editable: true
Enable editing
toolbar
toolbar: ["create"]
Add toolbar buttons
Endless Scrolling in Kendo Grid
What is Endless Scrolling?
Normally grid uses pagination.
But endless scrolling automatically loads more data while scrolling.
This improves user experience.
Example
scrollable: {
endless: true
}
Full Example with Endless Scrolling
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Home/GetStudents",
dataType: "json"
}
},
pageSize: 50,
serverPaging: true
},
height: 500,
scrollable: {
endless: true
},
sortable: true,
filterable: true,
columns: [
{ field: "StudentId", title: "ID" },
{ field: "StudentName", title: "Name" },
{ field: "City", title: "City" }
]
});
What Does pageSize: 50 Mean?
pageSize: 50
Grid fetches 50 records at one time.
When user scrolls:
- Next 50 records load automatically
- Then next 50 records load
This improves:
- Performance
- Speed
- Memory usage
Server Side Data Fetch Example
Controller
public JsonResult GetStudents(int page, int pageSize)
{
List<Student> list = new List<Student>();
for (int i = 1; i <= 500; i++)
{
list.Add(new Student
{
StudentId = i,
StudentName = "Student " + i,
City = "London"
});
}
var data = list.Skip((page - 1) * pageSize).Take(pageSize);
return Json(data, JsonRequestBehavior.AllowGet);
}
Explanation
Skip((page - 1) * pageSize)
Skips previous records
Take(pageSize)
Fetches only 50 records
Why Use 50-50 Data Fetching?
If database has:
100000 records
Loading all data together makes application slow.
Using:
pageSize: 50
Only 50 records load at a time.
Advantages of Endless Scrolling
- Faster loading
- Better performance
- Smooth user experience
- Less memory usage
Complete Advanced Grid Example
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Home/GetStudents",
dataType: "json"
}
},
pageSize: 50,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 550,
pageable: true,
sortable: true,
filterable: true,
groupable: true,
reorderable: true,
resizable: true,
selectable: "row",
scrollable: {
endless: true
},
toolbar: ["search"],
columns: [
{ field: "StudentId", title: "ID", width: 100 },
{ field: "StudentName", title: "Student Name" },
{ field: "City", title: "City" }
]
});