Nowadays, in every application, grid plays an important role in providing rich and easy interface for data management. In my last project I used Telerik Kendo UI Grid control for ASP.Net which I found quite easy and robust to use with ASP.NET MVC applications. Developers only need to provide some configuration and the rest of features like paging, sorting, filtering editing, updating, etc. runs accordingly. Moreover, there are lot of different skins available which you can apply depending on your UI design.
Following are the steps shows the usage of Telerik Kendo UI Grid control in ASP .NET MVC applications with a minimal amount of code.
- Create a new ASP.Net MVC Web Application in Visual Studio
- Make sure you have installed the Telerik ASP.NET MVC Controls suite from telerik website.
- In your MVC project add a reference to Kendo.MVC.dll from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\wrappers\aspnetmvc\Binaries\Mvc5
- Under the Scripts folder add kendo.all.min.js and kendo.aspnetmvc.min.js files from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\JS
-
Then, create another folder Styles under root MVC project and add three files and a Default folder containing images for telerik controls.
– kendo.common.min.css
– kendo.dataviz.min.css
– kendo.default.min.css
-
Open BundleConfig.cs file and add entries to newly added Kendo CSS files and Javascript files.
bundles.Add(new
ScriptBundle(“~/bundles/kendoUI”).Include(
“~/Scripts/kendo.all.min.js”,
“~/Scripts/kendo.aspnetmvc.min.js”));
bundles.Add(new
StyleBundle(“~/Content/css”).Include(
“~/Content/bootstrap.css”,
“~/Content/site.css”,
“~/Styles/kendo.common.min.css”,
“~/Styles/kendo.dataviz.min.css”,
“~/Styles/kendo.dataviz.default.min.css”));
7. Now open the _Layout.cshtml as this is the default master page in ASP.Net MVC application and add the newly configure kendo bundle in the head section as below
@Scripts.Render(“~/bundles/kendoUI”)
8. Now let’s create a new controller named “DemoController”
9. Create a sample model class that contains few properties
public
class
Person
{
public
Int32 Id { set; get; }
public
String Name { set; get; }
public
String Company { set; get; }
public
String Designation { set; get; }
public
String EmailAddress { set; get; }
}
10. Then in the newly added DemoController add a GetPersons method that returns the list of persons to display in a view.
public
class
DemoController : Controller
{
// GET: Demo
public
ActionResult GetPersons([DataSourceRequest] DataSourceRequest request)
{
List<Person> personLst = new
List<Person>();
personLst.Add(new
Person { Id = 1, Name = “Ovais Mehboob”, Company = “USTS”, Designation = “Technical Architect”, EmailAddress = “ovaismehboob@yahoo.com” });
personLst.Add(new
Person { Id = 1, Name = “Khusro Habib”, Company = “EO”, Designation = “SAP Lead”, EmailAddress = “n/a” });
personLst.Add(new
Person { Id = 1, Name = “David”, Company = “USTS”, Designation = “Network Administrator”, EmailAddress = “n/a” });
return Json(personLst);
}
}
11. Create a Index method that returns ActionResult. As per the default routing engine this will be invoked whenever the controller will be called without action name
12. Add a new empty view by right clicking the Index method
13. Add the html.kendo grid code as shown below in the Index.cshtml page
@using System.Collections;
@using Kendo.Mvc.UI;
<h2>Persons</h2>
@(Html.Kendo().Grid<DemoKendo.Models.Person>()
.Name(“grid”)
.Columns(columns =>
{
columns.Bound(p => p.Name).Width(200).Title(“Name”);
columns.Bound(p => p.Company).Width(300).Title(“Company”);
columns.Bound(p => p.Designation).Width(200).Title(“Designation”);
columns.Bound(p => p.EmailAddress).Width(200).Title(“Email Address”);
})
.HtmlAttributes(new { style = “height: 500px” })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Filterable()
.Sortable()
.Scrollable()
.ColumnMenu()
.Resizable(resizable => resizable.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(50)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
}
)
.Read(action => action.Action(“GetPersons”, “Demo”))
.Update(“SavePerson”, “Demo”)
)
)
14. If you see the above code the .Read is the method where you can specify the action name followed with a Controller name
15. Likewise read, you can add update and delete methods as well
16. There are many attributes provided which you can configure on the fly like Pageable() for paging, Filterable() for filtering. For detailed documentation for each method please visit telerik.com
17. Once you build and run the project you will see something like below
Hope this helps!
