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.

Advertisements

About ricardocovo

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

10 Responses to “Three ways to get started with KendoUI Grids on ASP.NET MVC”

  1. Very powerful tutorial, thanks so much you are a ninja!

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

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

  4. Thanks a bunch. Your videos were much better than Telerik’s examples. Kudos to you!

  5. Mohamed Romdhani Reply July 3, 2014 at 7:53 am

    Thanks a lot. Clear and Running tutorial.

  6. How will I make my grid editable? Your help will be appreciated.

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

  8. Thank you for your beautiful lessons! )

  9. Thank you so much sir for this.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: