MVC Kendo Grid Example
1St 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
