How to bind data to grid view using Kendo UI controls with MVC architecture

Binding Data to grid view using Kendo UI controls

Here we explain the process of binding data to the grid view using kendo UI.

Here we have designed the grid using kendo UI controls and have bound the data from the database with a stored procedure.

The architecture that we have used is MVC (Model View Controller) and the framework is Entity framework model.

In order to bind the data to grid view first we need to take a Kendo grid.

@(Html.kendo().Grid-> defines that the following is a kendo grid

The ModelName is the name that we give to the model at the time of creation

If a stored procedure is updated from the database _Result will be added automatically.

.HtmlAttributes(new { style = "width:100%;" })->Defines the width of the grid.

.Name("Grid")->Defines the name of the grid.

.Columns(columns =>->Defines the columns in the grid

.Title(””)->Gives a title to the grid column

.Format("{0:dd-MMM-yyyy}")->Defines the time format of the date time column.

.Pageable()->Defines that the grid is pageable.

.Sortable()->Defines that the columns in the grid are sortable both ascending and descending.

.PageSize()->If we specify a number the grid displays the requested number of records per page.

.DataSource(dataSource => dataSource-> Defines the source from where the data is bound to the grid.

.Read(read => read.Action("Methodname", "Controllername"))->This method reads the data into the grid.

@(Html.Kendo().Grid<ModelName.Models.StoredProcedureName_Result>()

                .HtmlAttributes(new { style = "width:100%;" })

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(p => p.Name).Title("Employee Name").Groupable(true);

        columns.Bound(p => p.DateOfBirth).Title("DoB").Format("{0:dd-MMM-yyyy}").Width(80);

        //columns.Bound(p => p.Gender).Title("Gender");

        //columns.Bound(p => p.FatherName).Title("TSB");

        columns.Bound(p => p.CurrentAddress).Title("Address");

        columns.Bound(p => p.PhoneNumber);

        columns.Bound(p => p.HighestDegree).Width(70);

        columns.Bound(p => p.YearofPassout).Title("YoP").Width(45);

        columns.Bound(p => p.EXP).Width(60);

        columns.Bound(p => p.RoleName);

        columns.Bound(p => p.EMailID);

    })

                    //.Groupable()

    .Pageable()

    .Sortable()

                    //.Scrollable()

                    //.Filterable()

    .HtmlAttributes(new { style = "width:100%;" })

    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(50)

              .Read(read => read.Action("Methodname ", " Controllername "))

    )

)

In the action result we will write the steps that will bind the data to the grid.

Here we will create an object of the model.

Finally to bind the data we will return the stored procedure in JSON (Java script object notation) format

public ActionResult Methodname ([DataSourceRequest] DataSourceRequest request)

        {

            ModelName objectname = new ModelName();

    return Json(objectname.StoredProcedureName().ToList().ToDataSourceResult(request));

        }