# Monday, April 30, 2012

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

 

KendoUI Calendar

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.

Monday, April 30, 2012 9:34:23 PM (Central Daylight Time, UTC-05:00)
Hey Keith! Nice post! I just wanted to clarify one statement you made (above): "KendoUI is not free"

Kendo UI is dual licensed (GPLv3 and commercial), which means that we support open source development. You can read more about pricing from here:

http://www.kendoui.com/get-kendo-ui.aspx

If you have any questions, please let me know!
Friday, May 18, 2012 2:59:36 AM (Central Daylight Time, UTC-05:00)
Thanks U John for the update ! it's great !

Regards,

Marie
Jeu gratuit
Wednesday, June 06, 2012 8:28:43 PM (Central Daylight Time, UTC-05:00)
The MVC Extensions will be supported until next year with service releases and stuff but for the most part you'll be better off with Kendo UI going forward. Offrir des fleurs
Friday, June 08, 2012 11:58:45 AM (Central Daylight Time, UTC-05:00)
Many thanks John for the new update it's realy verry good
Jeux de fille cuisine
Thursday, July 05, 2012 4:27:55 PM (Central Daylight Time, UTC-05:00)
Keith, I've learned a lot from you about Best Practices as it relates to ASP.NET MVC (i.e. Project structure for better testing and less noise). I've also learned a lot elsewhere about Best Practices as it relates to web page performance with things such as image sprites and reducing the number of HTTP requests by combining stylesheets and script files as well as putting stylesheets at the top and scripts at the bottom. Now, I realize this is a post about getting started with Kendo and _not_ fine tuning a deployment in production, but still, I continue to see code examples like yours above and I think to myself, why don't we have some type of automatic-combiner-minifier-proper-placementizer thingie where we can reference our stuff as above in development but during deployment it all works out to a best practice format. I've been struggling to get dotLess configured properly for a small part of this equation.

Sorry. Didn't mean to vent. I appreciate you discussing Kendo UI with MVC. Now I'm off to read the rest of your articles on this. However, I would be interested in any thoughts you have on MVC and ways to better structure things in line with good web page performance.
Brett Baggott
Thursday, August 16, 2012 6:26:24 AM (Central Daylight Time, UTC-05:00)
I have found most of the articles here are useful. I was even lately trying to explore JQuery Mobile stuff too. I am still confused of using Kendo UI or JQuery Mobile.

JQuery Mobile has open source community advantage and it is really hard decision to switch over to Kendo UI. Is it possible for you to write a good blog post about why i should switch to Kendo UI over JQuery Mobile?

Dhiraj
Tuesday, September 04, 2012 3:36:40 AM (Central Daylight Time, UTC-05:00)
Thanks you John ! I love it !

Regards,
stickers par milliers
Vincent
Friday, September 21, 2012 4:26:25 AM (Central Daylight Time, UTC-05:00)
Thanks John for this information. I'm french and there is not information in French blog
Friday, September 21, 2012 4:28:13 AM (Central Daylight Time, UTC-05:00)
Oh thanks, its great. Je suis moi aussi français et je ne trouvais aucune information à ce sujet donc un grand merci pour ses renseignements qui vont être pour moi d'un grand secours ^^
Sunday, April 21, 2013 8:16:55 AM (Central Daylight Time, UTC-05:00)
I’m so glad and honoured to be featured here! You don’t even know how much I
Sunday, May 05, 2013 2:48:13 AM (Central Daylight Time, UTC-05:00)
To be sure with each and every each data made with this topic. Automobile relatively revealing. Appreciate distributing.
Monday, May 06, 2013 2:38:10 AM (Central Daylight Time, UTC-05:00)
How can brands nimbly navigate the difficult waters of increasingly fragmented markets? How can brand managers win back some of the control they have lost to consumers in the age of social media?
Take for instance the Gap logo fiasco. The company had to pull back its new logo in the face of intense online backlash from consumers who wanted to keep the old one. By contrast, Starbucks' rebranding and its new siren logo were mostly evaluated as a success. What then determines the hits and the misses in the new branding era?
The answer may lie in how well companies adopt a "transbranding" philosophy and management system.
"Trans" is derived from Latin and as a prefix means "across, on the far side, and beyond." We commonly use words like "transportation" and "transfer"; in both
chaussure pas cher cases, "trans" connotes a bridging characteristic, whether it is between places, conditions, or people. Thus, transbranding is using brands to connect and effectively move between divergent markets.
Monday, July 29, 2013 3:50:31 PM (Central Daylight Time, UTC-05:00)
Merci pour ces excellentes précisions.
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview