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.
Pingback: Using Kendo AutoComplete in ASP.Net MVC 4.0 « Telerik Helper
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.
when i update grid, can it update the database when save change in grid?
yes of course
thx u for ur sharing
can u show me ur Persons model class
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!
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!
Pingback: Kendo Grid Extension “Tutorial” | Ely Bob's space
Pingback: bind Kendo UI grid to sql tables using Entity Framework .edmx model and HTML5/JavaScript | 我爱源码网