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 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: