4 Steps to Kendo UI


Overview:

In this post, we will look at the steps involved in working with Kendo UI. For those of you who are hearing about Kendo UI for the first time – I would recommend you head straight to www.KendoUI.com and spend couple of moments there to familiarize yourself with Kendo UI. In brief Kendo UI is

Kendo logo

A comprehensive, end-to-end framework, compatible with jQuery, and custom-built from the ground up for rock-solid reliability and lightning-fast performance. Includes MVVM support, a rich DataSource, several UI widgets, and everything you need to build rich JavaScript applications today.

It takes 4 steps to working with Kendo UI. So lets see the 4 steps in detail in the coming sections.

 


Step 1:

The simplest of all the steps :). This step involves downloading of Kendo UI. You can download Kendo UI from the download page at: http://www.kendoui.com/download.aspx.

Kendo UI comes in 3 flavors, namely:

  • Kendo UI Web – UI controls to be used in web applications
  • Kendo UI Data Viz – Data Visualization controls for both Web and Mobile platforms
  • Kendo UI Mobile – UI controls for Mobile platforms like iOS, Android and BlackBerry

Kendo UI comes with a free 30 day trial and I highly recommend downloading that. Rest of the sections will assume that you have downloaded kendo ui on to your hard disk.


Step 2:

Once you have downloaded the Kendo UI on to your hard drive next step is to start using it in a HTML page. First piece to get in place is the stylesheets required by the Kendo itself. These stylesheets are responsible for giving the look and feel of the UI controls or widgets as we call them. When you install the Kendo ui the styles folder contains all the required stylesheets. Kendo UI ships with  5 themes namely – Default, Black, Blue Opal. Metro and Silver.

We need to first reference the common stylesheet required by the Kendo framework. The link tag for this as follows:

<link href=”styles/kendo.common.min.css” … />

Here are the theme specific stylesheet which must be referenced while applying a particular theme:

  • Default theme:

<link href=”styles/kendo.black.min.css” … />

  • Black theme:

<link href=”styles/kendo.black.min.css” … />

  • Blue Opal theme:

<link href=”styles/kendo.blueopal.min.css” … />

  • Metro theme:

<link href=”styles/kendo.metro.min.css” … />

  • Silver theme

<link href=”styles/kendo.silver.min.css” … />

If you are using DataViz framework then you would need to refer DataViz stylesheet apart from the common stylesheet. Here is the link tag for that:

<link href=”styles/kendo.dataviz.min.css” … />

Here is the HTML code for step 2:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
  </head>
  <body>
  </body>
</html>

Step 3:

Once we have the stlesheet in place, next it to add the Javascripts which is required for the initialization of the UI controls/widgets themselves.

So for web applications, the first script to reference is the jquery. Then reference the kendo.web.min.js file from the js folder. Here is how the =script tag will look like:

<script src=”js/jquery.min.js” ..></script>
<script src=”js/kendo.web.min.js” ..></script>

If you are working with Data Visualization, then instead of the kendo.web.min.js you will need to refer kendo.dataviz.min.js file.

Here is the HTML code for step 3:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
  </body>
</html>

Step 4:

This is the interesting step. With Step 2 and Step 3 we have set the stage for the most interesting part of the journey with Kendo UI. Stykesheets and scripts necessary to work with Kendo UI has been referenced. Now we see how to initialize the kendo UI controls or widgets. Kendo UI Web as nearly 19 widgets to work with. You can know more about this at http://demos.kendoui.com/web/overview/index.html.

For this exercise I will take a simple control like Calendar widget and show you how to initialize that. To start with, place a div in the HTML body and give it name, let’s say “kendo-calendar”. Next spin up a jquery statement for document ready and code the following:

<script>
  $(document).ready(function(){
    $("#kendo-calendar").kendoCalendar();
  })
</script>

well that’s all its there to working with kendo UI. What we have done is, we have grabbed the div which have placed it in the HTML body and used kendo framework to turn that into a pretty neat calendar. Here is the code for the Step 4:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
	<div id="kendo-calendar"></div>
	<script>
		$(document).ready(function(){
			$("#kendo-calendar").kendoCalendar();
		});
	</script>
  </body>
</html>

Here is the live version of the same code that I have created in jsfiddle:

http://jsfiddle.net/kashyapa/CrEZb/


Summary:

In this post we saw how easy it is to work with Kendo UI. with simple 4 steps you are ready to take a ride with Kendo UI. Although we saw a simple example of calendar being initialized, pretty much all the widgets in Kendo UI can be initialized in the same mechanism. Hope you will do the step 1 and following along till step 4.

Till next time, Happy coding.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s