Back in April I started a series of posts related to using Kendo UI in ASP.NET MVC.  Last month the Kendo team released the first beta of Kendo UI for ASP.NET MVC.  So, long story short the blog posts on Kendo UI will continue but from this point forward they will move from implementing Kendo UI proper in ASP.NET MVC to using Kendo UI for ASP.NET MVC.

Kendo UI for ASP.NET MVC includes the complete Kendo UI suite (Web, Mobile, DataViz) plus a set .NET wrappers to be used with ASP.NET MVC that leverage exciting features of MVC such as data annotations, editor/display templates and validation.  Those of you still using the WebForms view engine are safe,  the wrappers work in both the Razor view engine and the WebForms view engine.

To get started download the Kendo UI for ASP.NET MVC bits and install them.  The bits include, what I would call, the Kendo UI core features plus all the ASP.NET MVC specific features so there is no need install both Kendo UI and Kendo UI for ASP.NET MVC.  If you already have Kendo UI core installed, don’t worry, the installer will adjust accordingly.

Once installed pull up the install location, for me it is “C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2012 BETA”, and play around with the example projects by running “\Examples\StartExamples.exe”.

Now…let’s get it up and running in an ASP.NET MVC project.

NOTE: The Kendo UI for ASP.NET MVC documentation states that both MVC 3 and MVC 4 are supported even though the actual Kendo.MVC.dll resides in the “Mvc3” directory.

1. Create a new ASP.NET MVC 3 or 4 project
2. Add a reference to: [Kendo UI Directory]\Binaries\Mvc3\Kendo.Mvc.dll
3. Copy the contents of [Kendo UI Directory]\Scripts to the Scripts folder of your MVC project
4. Copy the contents of [Kendo UI Directory]\Content to the Content folder of your MVC project
5. Reference the Kendo UI scripts and and CSS files in your layout page.
   *Note: If your using ASP.NET MVC 4 I suggest creating a bundler package
   
   

   <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">

   <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">

   <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

   <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

   <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

6. Add a reference to the Kendu.Mvc.UI namespace to the <namespaces> section of the web.config to allow your views to know about the Kendo HTML Helper extensions.

   <add namespace="Kendo.Mvc.UI"/>

7. Let’s test it out.  Open up Index.cshtml and create a Kendo UI control using the new HTML Helpers.
   

   @(Html.Kendo().DatePicker().Name("MyTestDatePicker"))

As with the previous parts of the series the code is available on GitHub.

I have recently started diving in to Kendo UI and have decided to document that dive and blog about it.  So this is the first post in a series dedicated to using Kendo UI in ASP.NET MVC.

Kendo UI is a JavaScript toolset developed by Telerik that leverages jQuery, HTML5, CSS3, and JavaScript to provide rich UI widgets and an MVVM framework that is ‘scary fast’.  The thing that really drew me to Kendo UI in the first place is there native skinning on mobile devices.  Unlike vanilla jQuery Mobile that renders the same iOS-esque view on all mobile devices Kendo UI Mobile applies specific native-looking styles for iOS, Android, and Blackberry.  Over the series of posts I have planned we will cover exactly what Kendo UI brings to the table for both the ‘desktop’ web and the mobile web, but today I will cover getting Kendo UI installed and configured in an ASP.NET MVC application.

Before we dive in to getting the bits I want to prepare you…Kendo UI is not free.  I know, I was surprised by this as well and it actually delayed my dive in to it for a bit.  In all honesty I am still not 100% sure how I feel about it not being free.  What I do know is that as a long time user of Telerik products they produce damn good tooling and there support system is second to none.  If you want to just play around with Kendo UI there is a 60-day free trial available.

Update: I received a comment from a member of the KendoUI team, thanks John, and my statement above needs some clarification.  Kendo UI is dual licensed (GPLv3 and commercial), so although it is not free for commercial use they do support open source development.  You can can get the official terms here: http://www.kendoui.com/get-kendo-ui.aspx

Note: To prepare for experimenting with KendoUI I created an empty MVC 4 project, that of course is not empty, and removed all scirpt and css files (other than Site.css).  I then removed all script and css registrations in _Layout.cshtml.  I did this because I wanted to deal strictly with KendoUI without all the other *noise* of the other script references.

You can download the KendoUI bits here: http://www.kendoui.com/get-kendo-ui.aspx

Once downloaded and unzipped copy the contents of the ‘js’ directory to the ‘Scripts’ directory of your ASP.NET MVC application and the contents of the ‘styles’ directory to the ‘Content’ directory.

Next you need to register the scripts and CSS files that Kendo UI needs in the _Layout.cshtml.

That’s it.  Kendo UI is now wired up.  Pretty much the same process as wiring up jQuery.  So now we can do a quick implementation to prove it.

If you followed my lead and created an empty project you you will need to create a controller and a view at this point.

The actual implementation of KendoUI is almost identical to that of jQuery which makes the ramp up time a lot less if you are familiar with jQuery.

As you can see on line 13 I have an input tag with and id of datepicker and then starting on line 5 I have my document ready function that selects the control with id of datepicker and calls the ‘kendoDatePicker’ function it.  The result is below.

In the next installment we will dig deeper into the different controls available in Kendo UI.

If you want to follow along with the source code it is available on GitHub.

The jQuery Accordion control is great for creating rich interactive HTML menus.  I used it in a recent project where I wanted “Home” to be the top menu option.  I Googled around and wasn’t able to find a way to have a menu item with no children link to some URL.  So I played around for a bit and came up this solution.