Posted on 3/3/2020 12:42:36 PM by Admin

Kendo Grid Server Side Binding

Ok, so you want to bind the Kendo Grid with the data on your server .

Forget about the Grid and think in simple terms, How will you show data from your database into 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 professional ,you will write your data access logic into your data access layer. Also you will not call it directly from your UI Layer i.e controller ,rather you will create a method in your business logic layer which will be called by your Controller.

But my intension here is not to teach you the layered architecture .So, keeping it simple we will write our data access logic into our controller's method.

To talk to database you can either use or Entity Framework. I am using Entity Framework for faster implementation. like below.

   public ActionResult GetEmployees(DataSourceRequest req)
            KendoGridContext db=new KendoGridContext();
            List emps=new List();
            emps= db.Employees.ToList();
           return Json(emps.ToDataSourceResult(req),JsonRequestBehavior.AllowGet);

Note:- I have used DataSourcesRequest as parameter,it is necessary for grid binding.

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 needs boxing and unboxing.

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 data you have got from 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 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 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 below.

  @using Kendo.Mvc.UI;
  @using DataAccess;
  @model Employee
    ViewBag.Title = "GridShow";

   @(Html.Kendo().Grid < DataAccess.Employee >()
            .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;" })
        .DataSource(dataSource => dataSource
       .Model(model => model.Id(p => p.Id))
       .Read(read => read.Action("GetEmployees", "Home"))

To configure the DataSource specifying the read method is what you need to keep in mind.

Now run the application and you will get below result.

 Kendo Grid
Server side binding Kendo Grid