Introduction to Telerik Kendo UI

Kendo UI is HTML 5 and Jquery based framework and it helps you to create modern Web Applications. Kendo UI helps you

  • In Data Binding
  • In Animations
  • With UI widgets like Grid and Chart
  • With Drag and Drop API
  • In Touch support.

Download kendo UI from here

Once you download you get below folders

image

Navigate to example folder for examples on various widgets.

If you want to start developing web applications using KendoUI then you need to add required file in your project.

You need to add below files in Script folder

image

And you need to add below files in Style folder.

image

Even though I have added script files and css files in Script Folder and Style folder respectively, you are free to keep them anywhere as you want. After adding these files you need to link them in header of the HTML page. You can add reference as below,

image

In later post I will go in detail of Kendo UI and play around all other aspects. However working with any widgets is very intuitive. For example if you want to work with Kendo AutoComplete , you can do that as below,

image

And using Jquery you can assign value as below,

image

Putting all code HTML and Script together full code is as below,

Test.htm


<html >
<head>
<!--In the header of your page, paste the following for Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Web scripts-->
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="Scripts/Test.js" type="text/javascript"></script>
<title>My Kendo UI Demo</title>
</head>
<body>
<h1>Kendo UI Demo</h1>
<input id="cricketerAutoComplete" />
</body>
<script type="text/javascript">
$("#cricketerAutoComplete").kendoAutoComplete(
["Sachin",
"Dhoni",
"Saurabh",
"Rahul"]);
</script>
</html>

When you run Test.htm in browser you should be getting below output.

image

In later post I will get into detail of all widgets. I hope this post is useful. Thanks for reading.

7 thoughts on “Introduction to Telerik Kendo UI

  1. Very nice post Dhananjay, and eagerly waiting for your next post as i am going to use it in my BSCS final project..going to start it in 1,2 weeks and your posts will be really helpful for me.

  2. Pingback: Introduction to Telerik Kendo UI | .NET, Javascript | Syngu

  3. Pingback: Working with Telerik Kendo UI Widgets: AutoComplete « debug mode……

  4. Pingback: Working with Telerik Kendo UI Widgets: AutoComplete « debug mode……

  5. Pingback: Monthly Report February 2012: Total Posts 19 « debug mode……

  6. Pingback: Working with Telerik Kendo UI Widgets: Calendar « debug mode……

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