Kendo UiBASICS

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 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

Download : http://www.kendoui.com

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

Calendar

ComboBox

DatePicker

DateTimePicker

DropDownList

Editor

Grid

ListView

Menu

NumericTextBox

PanelBar

Splitter

TabStrip

TimePicker

TreeView

Upload

Window

Examples

Extensive examples http://demos.kendoui.com/web

/examples of the trail zip folder

Usage

1. write mark up <input id=“dateOfBirth” />

Initialize <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 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.