Adding Telerik UI Widgets to MVC

 

One of the obstacles developers encounter when migrating from ASP.NET Web Forms to ASP.NET MVC is the lack of built-in server controls to enhance the user interface. In Web Forms, there are numerous server controls included within the ASP.NET framework; however these controls cannot be used in MVC because of its different page and event cycles. Yes, the MVC Razor View Engine and ASPX View Engine contain HTML Helpers, but they are not as robust or expansive as the Web Forms controls. To fill this void, Telerik has created a range of developer tools to create similar controls using JavaScript, CSS, and HTML5. One of these platforms is the Kendo UI for MVC which allows developers to add Web Form styled controls such as a Grid, ListView, DropDownList, DatePicker, and AutoComplete to MVC views. The process is relatively easy, with the depth of functionality based on the developer’s knowledge of JavaScript (JQuery) and CSS.

In order to create an ASP.NET MVC application using Telerik’s UI widgets you will need to download the 30 day free trial from Telerik and create a new Visual Studio project

Create a New ASP.NET MVC 4 Application

1. Open Visual Studio 2012.
2. Press CTRL+SHIFT+N to create a new project.
3. Select the Visual C# node and then Web to show all available web project templates for C#.
4. Select ASP.NET MVC 4 Web Application, change project name if desired, and click OK. This will start the New ASP.NET MVC 4 Project wizard.
5. Select Internet Application from the available templates and click OK. No need for the unit test project.
6. After the template creates the project, press CTRL+F5 to build and run the application.
7. Copy the Telerik UI for ASP.NET MVC JavaScript and CSS files into the Visual Studio Solution by following these steps:

• Navigate to the install location of Telerik UI for ASP.NET MVC**. By default it is in **C:Program Files (x86)TelerikUI for ASP.NET MVC.
• Copy the js directory from the install location and paste it in the Script folder of the application.
• Copy the styles directory from the install location and paste it in the Content folder of the application.
• Rename the Scripts/js directory to Scripts/kendo. Rename Content/styles to Content/kendo.
• Bundle the JavaScript and CSS files.

•  Open App_Start/BundleConfig.cs to add bundles for Telerik UI for ASP.NET MVC
  •  Add a script bundle for Telerik UI for ASP.NET MVC.
  • Add a style bundle for Telerik UI for ASP.NET MVC
  •  Instruct ASP.NET bundles to allow minified files in debug mode.
• Open the layout of the application. By default it is Views/Shared/_Layout.cshtml (or Site.master if using ASPX)
  • Render the Telerik UI for ASP.NET MVC style bundle.
  • Move the jQuery bundle to the head tag of the page. It is at the end of the page by default.
  • Render the Telerik UI for ASP.NET MVC script bundle after jQuery. 
• Add a reference to Kendo.Mvc.dll which is the assembly containing the Kendo UI MVC server-side wrappers

1.  Right-click the References node in Solution Explorer and click Add Reference.
2. Select the Browse tab of the Add Reference dialog and navigate to the install location of Telerik UI for ASP.NET MVC.
3. Navigate to wrappers/aspnetmvc/Binaries/MVC4. This directory contains the ASP.NET MVC 4 version of Telerik UI for ASP.NET MVC.
4. Select Kendo.Mvc.dll and click OK

• Add Kendo.Mvc.UI namespace to web.config file.

1. Open Views/web.config (or root web.config if using ASPX).
2. Locate the namespaces tag.
3. Append this add tag to the namespace tag: 

Adding a Kendo UI Widget to the Project

Once the Visual Studio solution has been created and integrated with the Kendo UI, we can start adding the Telerik UI widgets to our views. Let’s start with a simple Kendo UI DatePicker widget.  Open the Index view and at the bottom type @(Html.Kendo().DatePicker().Name(“datepicker”)) for Razor or <%: Html.Kendo().DatePicker().Name(“datepicker”) %> for ASPX.  Press CTRL+F5 to build and run the application.  As the code sample illustrates, properties are added in a sequence separated by a period.  Another easy widget is the NumericTextBox. For Razor type @(Html.Kendo().NumericTextBox().Name(“age”).Value(10).Spinners(false)) or ASPX <%: Html.Kendo().NumericTextBox().Name(“age”).Value(10).Spinners(false) %>.Run the application and you can see that only numbers and decimals can be entered into the textbox. See Figure 1. The Telerik widget automatically includes the JavaScript to limit all other characters and it also includes script to automatically add commas for thousands. The Telerik UI also integrates with Visual Studio to include a fluent interface displaying all available methods for the widgets.

Figure 1

Figure 2

Since the Telerik UI widgets are rendered as JavaScript object, developers can easily manipulate them using JavaScript. For instance, you can set the Value property at run time by creating the following script block. Run the application and the value is now 30.  See Figure 3.

Figure 3

Scripting the Kendo UI Widget

In the same manner you can also set the minimum and maximum dates for the DatePicker and start with just a simple html input element.  First, add at the bottom of the Index view. Then add the following script block which sets the current date as the value and sets a minimum and maximum date. See Figure 4.

Figure 4

A full list of available widgets are available at Telerik’s demo site. In the next part of this series, we shall add data driven widgets such as the Grid and DropDownList.

Need Help? Contact us