Using Kendo Grid in ASP.Net MVC 4.0

In this post we will see, how we could work with Kendo Grid in ASP.Net MVC. We will display data from SQL Server table in Kendo Grid using LINQ to Sql class. Pictorially we can represent it as follows

image

Before you start with this post, I strongly recommend you to read

Getting started with Kendo UI MVC Wrapper in ASP.Net MVC 4.0

Adding Model

Once you are done with setting up environment go ahead and add a model. We are going to use LINQ TO SQL Class as model. To add model right click on model folder and select New Item. Select Data tab and choose LINQ to SQL Classes to add as model. Give any name to model, I am leaving the default name.

image

Next on the design surface choose Server Explorer

image

If in the Server Explorer, you do not find Data Connection you want to use then go ahead and right click on the Data Connection and select Add New Connection

image

In Add Connection dialog box provide server name and from drop down choose desired database.

image

Click on Ok to add a new connection. Next from Server Explorer drag and drop the tables on dbml file to create the model. I am choosing only Person class from School database.

image

In Solution explorer you can see a dbml file has been added.

image

Adding Controller

We have created the Model, now we need to fetch data using Model in the Controller. I am going to use default created HomeController and Action Index. Go ahead and in HomeController.cs file modify the Action Index.

image

Here we need to create instance of model and pass the data to view. That can be done as following

image

Adding Kendo Grid on View

We are passing data from Index action, so we need to put Kendo Grid in IndexView. Go to View and Home folder and open Index.cshtml

image

Very first you need to make View as strongly typed. You can make a View strongly typed as following

image

Next we can bind data from Model to Kendo Grid as following. Make sure you provide name of the Kendo Grid. This is mandatory because name act as id attribute of the Grid element.

image

For your reference code in view is as following


@model IEnumerable<mvcwrappersample1.Models.Person>

<h3>Kendo Grid</h3>

@(Html.Kendo().Grid(Model)
.Name("personGrid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.HireDate);
columns.Bound(p => p.EnrollmentDate);
})
.Pageable() //Enable paging
)

Press F5 to run the application. You should able to get data from model in Kendo Grid.

image

I hope you find this post useful. Thanks for reading.

Advertisements

10 thoughts on “Using Kendo Grid in ASP.Net MVC 4.0

  1. Pingback: Using Kendo AutoComplete in ASP.Net MVC 4.0 « Telerik Helper

  2. Do you have any sample code for using Kendo UI MOBILE controls with MVC? All of the samples I see use Kendo WEB controls with MVC…Having a little difficulty doing this on the MVC side. Thanks.

  3. Hi,
    I did exyactly what you say, and when I test it, I don’t get any data.. just the grid with the columns.
    I have tried it in both versions (Razor/Aspx)

    Could you please show us the Persons class, so we can compare it?
    thanks in advance!

  4. Hi,
    I did exyactly what you say, and when I test it, I don’t get any data.. just the grid with the columns.
    I have tried it in both versions (Razor/Aspx)

    Could you please show us the Persons class, so we can compare it?
    thanks in advance!

  5. Pingback: Kendo Grid Extension “Tutorial” | Ely Bob's space

  6. Pingback: bind Kendo UI grid to sql tables using Entity Framework .edmx model and HTML5/JavaScript | 我爱源码网

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