Kendo Grid in ASP.NET MVC Using Helpers

Introduction

When building web applications, we often need to display data in a table format with features like:

Paging
Sorting
Filtering
Editing

Instead of writing complex code, we can use Kendo UI Grid.

Kendo Grid is a powerful UI component that helps display data easily with built-in features.

In this article, we will learn:

What Kendo Grid is
Why we use it
How to use Kendo Grid in MVC using Helpers
All important features with simple examples

What is Kendo Grid?

Kendo Grid is a UI component from Progress Telerik that helps display data in a table with advanced features.

Why Use Kendo Grid?

✔ No need to write complex JavaScript

✔ Built-in features (paging, sorting, filtering)

✔ Clean UI

✔ Easy to use with MVC

Step 1: Create Model

public class Student
{
    public int StudentId { get; set; }

    public string StudentName { get; set; }

    public string City { get; set; }
}

Step 2: Controller Code

public class StudentController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetStudents()
    {
        List<Student> list = new List<Student>()
        {
            new Student{ StudentId=1, StudentName="Abhay", City="Ahmedabad"},
            new Student{ StudentId=2, StudentName="Rahul", City="Surat"},
            new Student{ StudentId=3, StudentName="Amit", City="Rajkot"}
        };

        return Json(list, JsonRequestBehavior.AllowGet);
    }
}

Step 3: Add Kendo Grid in View (Using Helpers)

@(Html.Kendo().Grid<Student>()
    .Name("StudentGrid")

    .Columns(columns =>
    {
        columns.Bound(p => p.StudentId).Title("ID");
        columns.Bound(p => p.StudentName).Title("Name");
        columns.Bound(p => p.City).Title("City");
    })

    .Pageable()

    .Sortable()

    .Filterable()

    .Scrollable()

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetStudents", "Student"))
    )
)

What is this?

Output

Grid will show:

ID   Name     City
1    Abhay    Ahmedabad
2    Rahul    Surat
3    Amit     Rajkot

With:

✔ Paging

✔ Sorting

✔ Filtering

Important Kendo Grid Features (All Methods Explained)

1️⃣ Columns

columns.Bound(p => p.StudentName).Title("Name");

👉 Used to define columns

2️⃣ Pageable()

.Pageable()

👉 Adds pagination

3️⃣ Sortable()

.Sortable()

👉 Enable column sorting

4️⃣ Filterable()

.Filterable()

👉 Add filter option

5️⃣ Groupable()

.Groupable()

👉 Group data by column

6️⃣ Scrollable()

.Scrollable()

👉 Enable scrolling

7️⃣ Editable()

.Editable(editable => editable.Mode(GridEditMode.InLine))

👉 Enable inline editing

8️⃣ Toolbar

.ToolBar(toolbar => toolbar.Create())

👉 Add "Create" button

9️⃣ Command Column

columns.Command(command =>
{
    command.Edit();
    command.Destroy();
});

👉 Add Edit/Delete buttons

🔟 DataSource

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetStudents", "Student"))
)

👉 Connect grid with controller

Full CRUD Example

@(Html.Kendo().Grid<Student>()
    .Name("Grid")

    .Columns(columns =>
    {
        columns.Bound(p => p.StudentId).Editable(false);
        columns.Bound(p => p.StudentName);
        columns.Bound(p => p.City);

        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })

    .ToolBar(toolbar => toolbar.Create())

    .Editable(editable => editable.Mode(GridEditMode.InLine))

    .Pageable()
    .Sortable()
    .Filterable()

    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.StudentId);
        })
        .Read(read => read.Action("GetStudents", "Student"))
        .Create(create => create.Action("Create", "Student"))
        .Update(update => update.Action("Update", "Student"))
        .Destroy(delete => delete.Action("Delete", "Student"))
    )
)

What is this?

Controller CRUD Methods

public ActionResult Create(Student model)
{
    return Json(model);
}

public ActionResult Update(Student model)
{
    return Json(model);
}

public ActionResult Delete(Student model)
{
    return Json(model);
}

When to Use Kendo Grid?

Use Kendo Grid when:

✔ Display large data

✔ Need sorting/filtering

✔ Want professional UI

✔ CRUD operations required

Advantages

✔ Fast development

✔ Less coding

✔ Built-in features

✔ Professional UI

Conclusion

Kendo Grid is a powerful tool in ASP.NET MVC for displaying and managing data.

In this article, we learned:

How to use Kendo Grid with MVC Helpers
All important methods
CRUD operations
Real example