Transcript Kendo Ui - Moksha Studio Wiki

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

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

Menu

Calendar

NumericTextBox

ComboBox

PanelBar

DatePicker

Splitter

DateTimePicker

TabStrip

DropDownList

TimePicker

Editor

TreeView

Grid

Upload

ListView

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.