Kendo Grid in jQuery with All Important Properties in ASP.NET MVC

Abhay Harsora
1w
320
0
1
25
Blog

Introduction

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 = "Ahmedabad"
        });
    }

    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" }
    ]
});