Working with Kendo and MVC

Overview :

Kendo UI for ASP.NET MVC provides helper classes for the Kendo UI JavaScript framework. Using ASP.NET MVC one can easily configure and work with Kendo UI controls without writing big Javascript functions and all – Just with the help of these Helper classes.

Installation and Getting Started :

You can get more details and the installer here. You just need to install the installer and you are done.

To work with Kendo and MVC, you need to create a new "Kendo UI for MVC Web Application" – That is available under Templates > Visual C# > Web in the New Project window.

An alternative way is to Click on the Telerik Tab > Kendo UI for ASP.NET MVC > Create New Kendo UI Project

You can check that all the required Kendo script references are already added under Scripts > Kendo folder.

A deeper look :

In this section, I will be discussing on some very basic and widely used Kendo controls and their implementation with MVC helper classes.

1) DatePicker :

First, I will be discussing on the DatePicker control – how easily we can create a DatePicker control and how we can attach events to it.

This is how the Controller looks like -

So, the controller does nothing but returns the View. No trick we are playing with the Controller.

Let us take a look into the View -

Yes!! This is all we need to write in our View to get a nice looking Kendo DatePicker. No Javascript, nothing. Just the MVC wrapper classes.

So, how does this look in the browser? Let us have a look into the UI -

                     

We can select date from the Calender or we can type date at the text box. We can select between months and years as well.

Event attachment :

Now, if we want to attach any method to the Date-Change event, this is how we can do this.

Let's assume, if the calender date is changed, then, we will be showing a simple alert message to the user like – "Date selection has been changed!". So, here we go -

We will modify our View like -

And we will define the DateChanged method through Javascript like -

Other than Change event, we can have date-picker Open and Close events as well.

2) Grid :

Grid is one of the very powerful and widely used controls. In this section, I will be discussing how we can implement a Grid control using MVC helper classes and bind data to the Grid using Ajax.

Background – We have one Employee model like -

We need to create a Grid where we will be displaying EmployeeID, NationalIDNumber, Gender and HireDate as columns (randomly selected) – we donot need any other column to display.

This time, let us have a look into the View first -

Now, let us quickly discuss what we see in the upper code section -

• The code section shows that the Grid we are going to create is of type Employee.
• We are providing a DataSource and we are saying it should be Ajax. [ dataSource.Ajax() ]
• We are providing the Action and the Controller name for reading the data. [ .Read(read => read.Action("Employees_Read", "Grid")) ] - Here Grid is theController name and Employees_Read is the Action for reading Employees data.
• We are specifing which columns we want to display.
• We are making the Grid Pageable – The grid will be using Pagination.
• We are making the Grid Sortable – We can sort the column values.

So, in the controller, we need to write the Employees_Read method and return Employees data from that. Here is how the Controller looks like -

Here AdventureWorksEntities is the Entity I am using.

In UI, this is how the Grid looks like -

The Grid will be using Server side pagination as well, to explain, if the page size is 10 (as our upper example) this will fetch 10 results at a time only and results will come upon request.

So, when I will ask for say, Page no. 6, then only the results for Page 6 will be fetched from DataBase. This improves the application performance as well and we don't need to worry about the server side pagination.

3) Slider :

Next I would like to discuss on Slider control. This is again a simple and widely used control. Again we are not playing any trick with the Controller – the Controller will just return the View.

Let us have a look into the View -

Here we are setting the options for the Slider control -

.Min(0) –> Sets minimum value for the control.

.Max(10) -> Sets maximum value for the control.

.SmallStep(1) -> Sets small-step value.

.LargeStep(2) -> Sets large-step value.

.ShowButtons(true) -> Sets if we need to show the buttons. Default is true. If we pass false, buttons will not be shown.

.Orientation(SliderOrientation.Horizontal) -> Sets orientation for the slider – Horizontal/Vertical.

.TickPlacement(SliderTickPlacement.TopLeft) -> Sets tick placement position.

.Events(e => e.Change("OnSliderSlide")) -> Binds OnSliderSlide method to Change event. We can also have Slide event.

In UI, the slider looks like -

4) Menu :

Menu control is the next one I will discuss. As we all know, this is very very important and is almost a mandetory one in all the applications we work with. Here, I will be showing how we can create Menu control with Kendo helper classes in MVC. I will be showing the example with hard-coded data to make it simple, but as of our need, we obviously can fetch and use data from DataBase.

We can add elements and sub-elements into the Menu control just like the following code -

The code is simple and self-explanetory. This is just adding the items and sub-items into the menu.

So the UI generated with this code will be like -

The items will be on collapsed mode initially, it will expand when you hover on.

5) Editor :

The final control I would like to discuss is the Editor control. This one also we can create by a single line of code if we are using MVC helper classes for Kendo. All the Editor functionalities default to it.

Obviously we can change the defaults and create our custom functionalities etc. In the control.

Let us take a look into the View -

Believe me or not, that is the only thing we need to do to get an Editor control with all the default functionalities! The UI will look like -

We can write and edit text there, apply styles, formats and all we can do with a normal text editor.

Sometimes, we need the editor with some initial text into it. So, we can do something like this -

So, now the editor will be created with the "This is a default Value" text in it. We can remove the default tools from the editor and add our own custom tools as well if we need.

There are many more controls provided by Kendo as part of MVC helper class to make our life easier. Here I have chosen and discussed on some very basic and mostly used controls. We can get more details and demos from the Kendo site which is provided at the begining of this article.

Hope these will be helpful in reducing our effort and getting the equivallent amount of work output as before. Let us enjoy coding.