Kendo UI in ASP.Net MVC
ASP.NET

Kendo UI Web in ASP.NET MVC

 

Telerik UI for ASP .NET MVC is a set of server-side wrappers that allows using the Kendo UI widgets like Grid, DatePicker, DropDownList etc. from C# or VB .Net code to build modern web applications.

It includes all Kendo UI components as well as HtmlHelper extension methods (server-side wrappers) which allow you to configure the Kendo UI widgets by using C# code.

Telerik(Kendo) UI for ASP.NET MVC supports:

Downloading and Installing Telerik UI for ASP .NET MVC

You can download the Telerik online installer (exe file) or the MSI installer file or the .zip file from the Telerik official site (https://www.telerik.com/aspnet-mvc).

Run Telerik UI for ASP.NET MVC installer. The automatic setup will guide you through the rest of the installation. If you chose to download the .zip file, extract it to a location of your preference.

To use Telerik UI for ASP.NET MVC, we need to include the required JavaScript and CSS files and add reference to the Kendo.Mvc.dll assembly and update the web.config file of the application.

After adding the above files, we need to reference them in the layout of the application. i.e. by default, it is Views/Shared/_Layout.cshtml (for MVC) or Site.master (for ASPX.).

We can also use CDN services to include js and CSS

 

CSS

js

 

After configuring the kendo UI in Visual Studio, we will be able to see the following templates related to Kendo UI for MVC application.

Telerik Templates

 

After selecting the required template and once the application gets loaded, we can start using Kendo components in our MVC application.

 

Let’s see some of the Kendo UI components that can be used in MVC applications

1)DatePicker

Kendo DatePicker provides various features like

  • Allowing different date formats
  • Enabling or disabling the widget/component
  • Adding HTML attributes
  • Minimum and Maximum dates to be selectable etc.

 

Example:

 

Here in this example, it accepts a model property to store the value and pass it to the backend.

Enable(true/false) enables/disables the datepicker.

Format method displays the final date format to be displayed on the UI.

ParseFormats method lets users to provide different date formats as per their requirement.

2) Kendo Grid

The Grid HtmlHelper extension is a server-side wrapper for the Kendo UI Grid widget. It allows you to configure the Kendo UI Grid from server-side code and helps with data binding and editing.

 

There are two ways to bind a Kendo UI Grid for ASP.NET MVC:

  • server—The widget makes HTTP GET requests when binding.
  • ajax—The widget makes Ajax requests when binding.

The following configurations are available for a Kendo UI Grid:

The Create method sets the action method which is responsible for saving new data items.

The Destroy method sets the action method which is responsible for destroying data items.

The Events method specifies the event handlers for the data source events like

  • the “change” event.

.Change(“dataSource_change”)

  • the “error” event.

.Error(“dataSource_error”)

  • the “requestStart” event.

.RequestStart(“dataSource_requestStart”)

The Model method configures the model of the data source.

The PageSize method sets the page size used during paging. The default page size is 10.

The Read method sets the action method which is responsible for reading data items and for returning them as JSON.

The Sort method sets the initial sorting, as demonstrated in the example below.

The Update method sets the action method which is responsible for saving updated data items.

The Filterable method enables or disables the filtering of data.

The Title method sets the text displayed in the header of the column.

etc…

Example:

 

Here in this example,

Grid accepts a model which has all the properties that needs to be displayed in the columns.

Bound method is used to show the columns in the grid. It accepts properties from the specified model.

Width method is used to set the width of an individual column of the grid.

Command method is used to add commands like grid data edit and destroy.

Kendo grid allows 2 types of data editing

  • In-line editing
  • Pop-up editing

 

 

In this example editable.Mode(GridEditMode.PopUp)  enables users to edit data using pop-up.

events.Edit(“SetFileWindow”)) gives users the flexibility to apply customization on the pop-up. SetFileWindow() method will be triggered when we click on edit button in the grid.

Read method accepts 3 parameters in this example, first parameter is Action method name, second parameter is Controller name and third parameter accepts html attributes.

Update, Destroy methods are similar to Read method except that they are used for different operations.

RequestEnd method is called when the grid data source request is completed.

 

SUMMARY

Telerik(Kendo) UI for ASP.Net MVC provides rich set of Kendo UI widgets to build web responsive and efficient web applications enabling server-side wrappers. There are around 70+ widgets (like AutoComplete, ColorPicker, ComboBox, Editor, MultiSelect, NumericTextBox, Upload etc.)  available. We can also change the look and feel (appearance) of the Kendo widgets based on our application theme. It also provides a plug-in for Visual Studio to enhance the experience of developing web applications.

About The Author

Leave a Reply

*