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="Peter", City="London"},
            new Student{ StudentId=2, StudentName="Scott", City="Liverpool"},
            new Student{ StudentId=3, StudentName="Leo", City="Leeds"}
        };

        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    Peter    Londo
2    Scott    Liverpool
3    Leo       Leeds

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

10. 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