Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
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.
Once you download you get these folders:
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:
And you need to add the below files in the Style folder:
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:
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:
And using Jquery you can assign the value as below:
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:
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/
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}