Three ways to get started with KendoUI Grids on ASP.NET MVC

— Disclaimer: I do not work for KendoUI (Telerik) and I am not getting anything in return for this entry… I just like the library 😉

Over the past months I have been evaluating the KendoUI library and using it on my pet projects. I really like it, is evolving very fast and has good community around it.

KendoUI Grids are very flexible and can be used in many different ways. In this post I will show how you can get started with KendoUI grids on your ASP.NET MVC Projects., I will show you three different ways I have used them, which include Creating the Grid starting from a basic ASP.NET MVC List Template, Creating the grid over an empty div with a remote data source, and finally, how to create a grid using KendoUI templates.

These walk-troughs will cover most of the basics but are only intended to get you started; I encourage you to go to KendoUI.com and view all other options/configurations/methods available.

Download the Code

Method 1: Grid over Existing HTML

In this example, we start from the MVC List Template and convert it to a fully functional grid with pagination and sorting.

Method 2: Grid over an Empty Div

In this example, we start over an empty div and use a remote data source. We modify our controller to provide the required Json. The result is a grid that allows paging, sorting, grouping and filtering.

Method 3: Grid Using Templates

We start from the MVC Template List, and convert it to a Grid that uses remote data source and is fully functional. This is my prefer method because it provides  simplicity when modifying the grid presentation, and has the power of the remote datasource.