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 below folders
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
And you need to add below files in Style folder.
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,
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,
And using Jquery you can assign value as below,
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.
In later post I will get into detail of all widgets. I hope this post is useful. Thanks for reading.
Follow @debug_mode
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.