Ok, so you want to bind the Kendo Grid with the data on your server (database).
Forget about the Grid and think in simple terms, How will you show data from your database into Asp.net MVC view. I think you will follow the below steps.
step 1. In the controller, you will create a method to retrieve data from your database. If you are a professional, you will definitely write your data access logic into your data access layer. Also, you will not call the method directly from your UI Layer i.e from the controller, rather you will create a method in your business logic layer that will be called by your Controller.
But my intention here, is not to teach you layered architecture. So, we will keep it simple and will write our data access logic into our controller's Action method.
To talk to the database you can either use Ado.net or Entity Framework. I am using Entity Framework for faster implementation. like below.
public ActionResult GetEmployees(DataSourceRequest req)
{
KendoGridContext db=new KendoGridContext();
List<employee> emps=new List<employee>();
emps= db.Employees.ToList();
return Json(emps.ToDataSourceResult(req),JsonRequestBehavior.AllowGet);
}
Note:- I have used DataSourcesRequest as parameter,it is necessary for binding grid .
Step 2. Now you have data. If you are a complete newbie you will take a viewbag or viewdata and will fill it with the data you have.But ViewBag and ViewData are not strongly typed and do boxing and unboxing, which is not good for performance.
So be a good programmer, use Class objects (Model) .Meaning, create a class with the properties you want to show in your view like below.
public class EmployeeVM
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime DOB { get; set; }
public int Salary { get; set; }
public string Gender { get; set; }
}
Make a collection and fill your object properties with the data you have retrieved from the database and add it to the collection.
step 3.Send this collection to your view and make your view strongly typed.
step 4. Using foreach loop show the data.
so these were the steps, we follow, usually.
But for kendo Grid ,it is even more simpler. We don't need to send data to the view rather the Kendo Grid can itself perform an Ajax request to get the data and fill himself.We just need to configure the DataSource and Columns of grid .Both accepts expression, so we use Lambdas for configuration like shown below.
@using Kendo.Mvc.UI;
@using DataAccess;
@model Employee
@{
ViewBag.Title = "GridShow";
}
@(Html.Kendo().Grid < DataAccess.Employee >()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("Id").Visible(false);
columns.Bound(c => c.Name).Title("Name").Width(150);
columns.Bound(c => c.DOB).Title("DOB").Width(150).Filterable(false);
columns.Bound(c => c.Salary).Title("Salary").Width(150).Filterable(false);
columns.Bound(c => c.Gender).Title("Gender").Width(150).Filterable(false);
}).HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("GetEmployees", "Home"))
.PageSize(20)
)
)
To configure the DataSource, we specify the controller and Action Method's Name in the Read extension method, and it is the only thing that you need to keep in mind.
Now run the application and you will get the below results.
