Kendo Ui Basics

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

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

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

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

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

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+

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.

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

Explore the Examples Download the 30 days trails from http://www.kendoui.com Unzip it. All the examples are listed on the example folder inside it

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

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

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

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.

An example of using kendo UI /examples

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

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.

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

Examples Extensive examples /examples of the trail zip folder http://demos.kendoui.com/web /examples of the trail zip folder

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

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

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

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>

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>

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

Primitives

ThemeBuilder Tool for modifying kendo UI themes Just a browser booklet Real-time styling of your application To check demo http://themebuilder.kendoui.com

Explore the documentation http://docs.telerik.com/kendo-ui/introduction Every details are listed here.