1. Kendo Ui
Basics

2. What we will do? What is Kendo UI? Check browser support Licensing
Download and Install
Add it to web application

3. What is Kendo UI?
JavaScript framework for building modern interactive web applications
Collection of scripts file and resources( styles, images, etc.)
Leverages
JavaScript
HTML 5
CSS3
jQuery

4. What Kendo UI provide? Rich UI Widgets Client – side DataSource
HTML5 based controls based on jQuery Core
3 categories of UI widgets
Web
DataViz
Mobile
Client – side DataSource
Abstraction for working will all types of data on the client side
MVVM Framework
Provides declarative binding and two-way synchronization in web application
Templating
Animation and Drag & Drop
Validation Framework

5. Why? Kendo UI provides all the tooling we need in one package
Built from ground up to deliver performance
Professional support are available

6. Browser Support IE 7.0+ Firefox 10.0 + Chrome All versions
Opera
Safari 4.0+

7. Platform support
XP / Vista / 7 server 03, 08 r1, r2 (32, 64 bit editions)
OS X+
Android 2.0+
IOS 3.0+
Blackberry 6.0+
webOS 2.2+

8. Licensing Trial 30 days GPL v3.0 for Open source License Commercials
We Kendo UI with our website but we have to agree GPLV3
Kendo UI Web is available with open source license. Mobile/DataViz and server wrappers are available with paid license.

9. Downloading and Install
Its pure JavaScript tool set, so unzip it
Now we are ready to go.

10. Explore the Examples
Download the 30 days trails from
Unzip it.
All the examples are listed on the example folder inside it

11. Adding kendo UI to web page
Copy “js”
Copy “styles”
Register the scripts and CSS

12. Registering for MVVM, validation, and other Framework pieces Include
Kendo.common.min.css
Kendo.default.min.css
Jquery.min.js
Kendo.web.min.js

13. Registering to use data visualization Include Kendo.dataviz.min.css
Jquery.min.js
Kendo.dataviz.min.js

14. Registering To use mobile version Include
Kendo.mobile.all.min.css
Jquery.min.js
Kendo.mobile.min.js
And if you need all then you need to register all above mention files.

15. An example of using kendo UI
/examples

16. Web widgets. What? Basic usage. Configuration Event Binding Styling
Complex UI widget : Grid

17. What are web widgets? They are collection of HTML5 Controls
Based on jQuery Core
For web, touch-enabled desktop development
Built for performance.
Kendo UI is based on jQuery core but Kendo UI is not extension of JQuery.

18. Available web widgets autoComplete Menu Calendar NumericTextBox
ComboBox
PanelBar
DatePicker
Splitter
DateTimePicker
TabStrip
DropDownList
TimePicker
Editor
TreeView
Grid
Upload
ListView
Window

19. Examples Extensive examples /examples of the trail zip folder
/examples of the trail zip folder

20. Usage 1. write mark up Initialize <input id=“dateOfBirth” />
<script type=“text/javascript”>
$(document).ready(function(){
$(“#dateOfBirth”).kendoDatePicker();
});
</script>

21. Declarative Initialization
1. Markup
<input id=“dateOfBirth” data-role=“datepicker” />
2.Initialize
<script type=“text/javascript”>
$(document).ready(function(){
Kendo.init($(“#dateOfBirth”));
});
</script>
//jQuery selector select the controller

22. Confriguation JSON-formatted settings
$(“#dateofBirth”).KendoDatePicker(
{format: “yyyy/MM/dd”} );
Data attributes
<input id=“dateOfBirth” data-role=“datepicker” data-format=“yyyy/MM/dd” />

23. DataSource Configuration
<input id=“colorPicker” />
<input id=“shapePicker” data-role=“combobox”
Data-source=‘[“Circle”,”Oval”,”rectangle”,”Square”]’ />
<script type=“text/javascript” >
$(document).ready(function(){
$(“#colorPicker”).kendoComboBox({
dataSource: [“Blue”,”Green”,”Red”,”Yellow”]
});
Kendo.init($(“#shapePicker”));
</script>

24. Event Binding <input id="colorPicker" />
<input id="shapePicker" data-role="combobox" data-source='["Circle","Rectangle"]' data-change="onShapeChange" />
<input id="sizePicker" data-role="combobox" data-change='["Small","Large"]' />
<script type="text/javascript" >
function onColorChange(e) { alert('Color Change!'); }
function onSHapeChange(e) { alert('Shape Change'); }
function onSizeChange(e) { alert('Size Change'); }
$(document).ready(function (){
$("#colorPicker").kendoComboBox({
dataSource: ["Blue", "Green", "Red", "Yellow"],
change: onColorChange
});
kendo.init($("#shapePicker"));
kendo.init($("#sizePicker"));
var sizePicker = $("#shapePicker");
sizePicker.bind("change", onSizeChange).data("kendoComboBox");
</script>

25. Styling Kendo.common.css Kendo.[skin].css
Its about positioning and sizes and require widgets to work properly.
Kendo.[skin].css
Colors and backgrounds
Skin specific – out of the box there are 5 skin available
Note: use common.css always before skin.css

26. Primitives

27. ThemeBuilder Tool for modifying kendo UI themes Just a browser booklet
Real-time styling of your application
To check demo

28. Explore the documentation
Every details are listed here.