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
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.
Next on the design surface choose Server Explorer
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
In Add Connection dialog box provide server name and from drop down choose desired database.
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.
In Solution explorer you can see a dbml file has been added.
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.
Here we need to create instance of model and pass the data to view. That can be done as following
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
Very first you need to make View as strongly typed. You can make a View strongly typed as following
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.
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.
I hope you find this post useful. Thanks for reading.
Helping Ninja Technologists 