Implement Kendo Grid Using ASP MVC 5.0

We are briefly going to discuss the Kendo Grid and its uses.

1. Introduction
2. Kendo Installation
3. Use Kendo script and style
4. Kendo Attributes
5. Kendo Grid

Now, we will discuss each point one by one.

Introduction

Kendo has various operations such as how to perform an action and operations with records. It has paging, filtering, sorting, editing, grouping, fixed pages, and column lockable functionalities.

Kendo Installation

Install the Kendo tool along with your Visual Studio. VS2015 is the best to work with Kendo.

If you have installed Kendo Grid, the .dll file will be placed under the directory: C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2018\wrappers\aspnetmvc\Binaries\Mvc5

Kendo.dll Location

It has three different directories --  MVC3, MVC4, and MVC5.

Script files

The script files will be available in the following directory:

C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2018\vsdoc

CSS styles

The style files will be located in C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2018\styles directory.

Use Kendo script and style

The Script and Styles should be added inside the project to generate Kendo Grid and other related functionalities. Find the below screenshots.

Including the version as a directory is a better format to understand others.

Kendo Attributes

The below attributes will be used in the Kendo Grid tool.

1. Filterable
   It will filter your data on the Grid. You can see the equal data, not equal data, starting with letter/word, containing data etc.
   
   
   
   
2. Pagination
   The pagination method is used to move from one page to another or directly move on the last/ first page in the grid.
   
   
   
   
3. Sortable
   The sortable option is used to order the grid based on column records. We can order it by ascending and descending format.
   
   We can directly click on the grid to sort the data. Find the below screenshot for reference.
   
   

Like this, we have a lot of ways to implement the option for Kendo Grid.

Kendo Grid

Now, we are going to see the simple code to generate Kendo Grid on the application. So, make sure that you have installed all other related files that have been imported into the application directory. 

Find the sample code for reference.

@(Html.Kendo().Grid(Model).Name("Grid").TableHtmlAttributes(new { @class = "table table-striped" })
            .Columns(columns =>
            {
                columns.Bound(x => x.Name);
                columns.Bound(x => x.CreateDate);
                columns.Template(@<text>
                                    @Html.ActionLink("Details", "Details", new { id = item.ID })
                                </text>)
                                .HeaderTemplate("Options")
                                .HeaderHtmlAttributes(new { @class = "text-center options-column" })
                                .HtmlAttributes(new { @class = "text-center" })
                                .ClientTemplate(
                                    Html.ActionLink("Details", "Details", new { id = "REPLACEME" }).ToHtmlString().Replace("REPLACEME", "#:ID#")
                                );
            })
            .Pageable(p => {
                                p.Enabled(true);
                                p.PageSizes(new int[] { 5, 15, 25, 50, 100, 500 });
                            })
            .Sortable()

                                                .Filterable(filterable => filterable
                                                .Extra(true)
                                                .Operators(n => n
                                                    .ForString(str => str.Clear()
                                                        .Contains("Contains")
                                                        .StartsWith("Starts with")
                                                        .EndsWith("Ends with")
                                                        .IsNotEqualTo("Is not equal to")
                                                        .DoesNotContain("Does not contain")
                                                    )))
            .HtmlAttributes("options-column")
            .DataSource(dataSource => dataSource.Ajax()
                    .PageSize(15)
                    .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
                    .Read(read => read.Action("Corporations_Read", "Corporations")))
            .Events(events => events.DataBound("GridDataBound"))
        )

The above code contains the attributes and formats.

Output

Hope this format helps to learn about kendo grid. In the grid, you can see that the action method “Corporations_Read” is called to get the data from the database. Find the below Controller method.

And “Corporations” is a Controller.

Controller

public ActionResult Corporations_Read([DataSourceRequest] DataSourceRequest request)
{
   return Json(new PrsData.Models.CorporateHeadquarters().GetCorporateHeadquarters().ToDataSourceResult(request));
}

Hope this helps.

Thanks!