MVC KENDO GRID WORKING

MVC Kendo Grid Example

1^St Method

First Go to Master Page.

And add the following line of Code. Now when I click on Employee the Details should be displayed to me.

Now I need to create an Employee Controller.Before That I would like to

1 Create a Folder with View Models.

 2 create a class with name “EmployeeViewModel” to add gets and sets properties.

Go to EmployeeViewModel.cs and write the following lines of Code.

public class EmployeeViewModel

    {

public int Employeeno { get; set; }

       public string EmployeeName { get; set; }

       public string EmployeeAddress { get; set; }       

public List<EmployeeViewModel> lstEmployees { get; set; }

     }

Add the Reference of Kendo

And then go to Web.Config  and add namespace for Kendo ( in both the web.config files)

1 which is inside View Folder

2 which is outside

To Apply Styles

Go to Content Folder, all the styles related to Kendo need to be paste here.

All the scripts files related to Kendo need to be in Scripts Folder

Then go to master page (layout.cs.html) under View Folder and add the following styles and js files related to Kendo.

Then go to controller folder , and select

And Click On Add button.

Write the following Method in Employee Controller as shown above.

Create a Model Class with Name Employee.cs and write the following code as shown.

So go to Controller and Right click on Selected Method Name i.e. (Employee Details)

And Click on Add Button.

Write the following code

@model MvcApplication3.ViewModels.EmployeeViewModel

@{

    ViewBag.Title = "EmployeeDetails";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>EmployeeDetails</h2>

@(Html.Kendo().Grid(Model.lstEmployees)

        .Name("grdReports")

        .Columns(columns =>

        {

            columns.Bound(c => c.Employeeno).Width(140);

            columns.Bound(c => c.EmployeeName).Width(90);

            columns.Bound(c => c.EmployeeAddress).Width(90);

        })

       // .BindTo(Model.GetReportDetails())

        .Sortable()

         .Pageable(pageable => pageable

            .Refresh(true)

            .PageSizes(false)

            .ButtonCount(2))

            .DataSource(dataSource => dataSource

                .Ajax()

                 .PageSize(5)

                .ServerOperation(false)

        )

    )

And Run the application

Click on Employee Tab