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.
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.
- DOCTYPE html>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <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"/>
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.
- ViewBag.Title = "Getting Started With KendoUI - Installation and Configuration";
- <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.