Remote Binding Kendo Grid In Partial View Using ASP.NET MVC And Entity Framework

Introduction

In this article, I’ll describe how to remote bind the kendo grid in Partial View using ASP.NET.MVC and Entity Framework. The application is developed basically using Entity Framework database first approach and MVC

Prerequisites

Basic knowledge in ASP.NET MVC, Entity Framework and kendo UI framework

Set up the Database

Open SSMS with new query window, create a new database, and a table for the demo purpose. Here, the script to create a database and table is given below:

CREATE DATABASE Employee
CREATE TABLE Employee
  (
  EmployeeID INT IDENTITY(1,1) CONSTRAINT Pk_Emp_Id PRIMARY KEY,
  FirstName VARCHAR(20),
  LastName VARCHAR(20)
  )

Insert some sample records, as given below:

INSERT INTO Employee VALUES('Bob','Ross')
 INSERT INTO Employee VALUES('Pradeep','Raj')
 INSERT INTO Employee VALUES('Arun','Kumar')
 INSERT INTO Employee VALUES('Vasanth','Kumar')

The table design is given below:

Create New MVC Project

Create a new empty ASP.NET MVC application as per the following figures:

Open Visual Studio ->File ->New project ->ASP.NET Web Application.

 

Select MVC and click OK.

 

Please refer to my previous article to check out how to configure Kendo UI in ASP.NET MVC Application. 

Generate the Model

Now, we will create Entity Framework models from the database tables.

Step 1: Right-click the Models folder, select Add -> ADO.NET Entity Data Model or select Add->New Item. In the Add New Item window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file Employee and click Add.

   

Step 2: In the Entity Data Model Wizard, select EF Designer from the database and click Next.

  

 

Click Next. 

Step 3: Click the New Connection button. The connection properties window will open.

 

Step 4: In the Connection Properties Window, provide the name of the local Server where the database was created (in this case (DESKTOP-585QGBN)). After providing the Server name, select the Employee from the available databases and click OK.

Step 5: You can use the default name for the connection to save in the Web.Config file and click Next.

Step 6: Select Table to generate models for Employee table and click Finish.



Create a Controller

Create a new empty Controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as EmployeeController.

Write the following code in the Controller.

private EmployeeEntities db = new EmployeeEntities();

blic ActionResult Demo()
    {

        return PartialView("_EmployeeList");

    }

    // GET: Employee
   public ActionResult GetAllEmployee([DataSourceRequest]DataSourceRequest request)
    {
        try {

        var employee = db.Employees.ToList();

       return Json(employee.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
        }
        catch(Exception ex)
        {
            return Json(ex.Message);
        }

    }

Creating a Partial View

Right click on View->Shared folder-> Add empty MVC View. In my case, I named it as _EmployeeList.cshtml,

 

Write the following code in it.

_EmployeeList.cshtml 

@model KendoMvcApp.Models.Employee


<h2>Employee</h2>
<div class="container">
    <div class="row">

        @(Html.Kendo().Grid<KendoMvcApp.Models.Employee>()
    .Name("EmpGrid")
    .Selectable()
    .Columns(columns =>
    {
        columns.Bound(c => c.EmployeeID);
        columns.Bound(c => c.FirstName);
        columns.Bound(c => c.LastName);

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAllEmployee", "Employee"))
        )
        )
</div>
    </div>

Creating a View

Right click on View->Employee folder-> Add new MVC View, In my case, I named it as Index.cshtml

Write the following code in it.

Index.cshtml

@model KendoMvcApp.Models.Employee

@{
    ViewBag.Title = "Index";

}

<div class="row">
    <button id="open" class="k-button">Open Employee Grid</button>
</div>

<div class="container">
    <div class="row">

       <br />
        @(Html.Kendo().Window()
        .Name("window")
        .Width(630)
        .Height(315)
        .Draggable()
        .Resizable()
        .Visible(false)
        .Title("Employee List Grid")
        .LoadContentFrom("Demo", "Employee")
        )


    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        var myWindow = $("#window");
        $("#open").click(function (e) {
            myWindow.data("kendoWindow").open();
        });
    });
</script>

In this view, we have the button and the kendo window which is not visible initially. When the button click happens, the kendo window will open with the content of employee records in kendo grid.

Open _layout.cshtml and add following action link in it.

<li>@Html.ActionLink("Employees","Index","Employee")</li>

Result

 

 

 

Download Source Code.

I hope you enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.