Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to Kendo UI

DZone's Guide to

Introduction to Kendo UI

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

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 these folders:

image

Navigate to the 'example' folder for examples of various widgets.

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

You need to add the below files in the Script folder:

image

And you need to add the below files in the Style folder:

image

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

image

In a later post I will go into the details of Kendo UI and play around with 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 the value as below:

image

Putting all HTML and Script code together:

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 your browser, you should get this output:

image

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

 

Source: http://debugmode.net/2012/02/18/introduction-to-telerik-kedno-ui/

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}