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.

Author: ricardocovo

Senior Software Architect/Developer with extensive experience in web related technologies.

11 thoughts on “Three ways to get started with KendoUI Grids on ASP.NET MVC”

  1. Superb. Thanks alot. i am feeling quite confident about Kendo now. 🙂
    Thanks Again.
    Your videos are awesome, even better then what kendo has provided.

  2. Gracias Ricardo, una ayuda realmente invaluable, para todos aquellos que se esten adentrando en este framework muy prometedor

  3. In your DevSample you have the wrong field on Model { field: “Model”, title: “MODEL” }
    Also you should add filterable: false to Action column.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s