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.
_Layout.cshtml
- DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <title>@ViewBag.Titletitle>
- <script src="~/Scripts/jquery.min.js">script>
- <script src="~/Scripts/kendo.all.min.js">script>
- <link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css"/>
- <link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css"/>
- head>
- <body>
- @RenderBody()
- body>
- html>
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.
Index.cshtml
- @{
- ViewBag.Title = "Getting Started With KendoUI - Installation and Configuration";
- }
-
- <script type="text/javascript">
- $(document).ready(function(){
- $("#datePicker").kendoDatePicker();
- });
- script>
-
- <h2>@ViewBag.Titleh2>
-
- <input id="datePicker" />
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.