Create a New ASP.NET MVC 4 Application
- Open Visual Studio 2012.
- Press CTRL+SHIFT+N to create a new project.
- Select the Visual C# node and then Web to show all available web project templates for C#.
- 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.
- Select Internet Application from the available templates and click OK. No need for the unit test project.
- After the template creates the project, press CTRL+F5 to build and run the application.
- 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.
- 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
- Right-click the References node in Solution Explorer and click Add Reference.
- Select the Browse tab of the Add Reference dialog and navigate to the install location of Telerik UI for ASP.NET MVC.
- Navigate to wrappers/aspnetmvc/Binaries/MVC4. This directory contains the ASP.NET MVC 4 version of Telerik UI for ASP.NET MVC.
- Select Kendo.Mvc.dll and click OK
- Add Kendo.Mvc.UI namespace to web.config file.
- Open Views/web.config (or root web.config if using ASPX).
- Locate the namespaces tag.
- Append this add tag to the namespace tag:
Adding a Kendo UI Widget to the Project
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.
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.