Telerik Kendo UI Overview

Fast, Light, Complete
70+ jQuery-based UI widgets in one toolset
JS Framework Agnostic | No lock in
AngularJS Integration | Bootstrap Theme
Extensive Data Visualization Support
Mobile Specific Widgets | App Tooling
Touch Support | Adaptive Rendering
Modern Comprehensive HTML5/JS Framework

Why Kendo UI?
Everything you need, in one neat package

What's in the Box?
The different parts of Kendo UI
Application Framework
Web UI
Mobile UI
Data Visualization

Web UI
30 Widgets (and growing...)
AutoComplete
Button
Calendar
ColorPicker
ComboBox
DatePicker
DateTimePicker
DropDownList
Editor
Grid
ListView
MaskedTextBox
Menu
MultiSelect
Notification
NumericTextBox
PanelBar
PivotGid
ProgressBar
Scheduler
Slider
Sortabl
e
Splitter
TabStrip
TimePicker
ToolBar
Tooltip
TreeView
Upload
Window

Mobile UI
A complete application toolset for building hybrid and mobile web applications
ActionSheet
ButtonGroup
Drawer
Forms
ListView
MobileButton
ModalView
NavBar
PopOver
Scroller
ScrollView
SplitView
Switch
TabStrip

Data Vizualization
Charts / Graphs/ Other Visuals
Area Charts
Bar Charts
Barcode
Box Plot
Charts Bubble
Charts Bullet
Charts Chart
API Diagram
Donut Charts
Funnel Charts
Gantt
Line Charts
Linear Gauge
Map
Pie Charts
Polar Charts
QR code
Radar Charts
Radial Gauge
Range Bar
Charts Scatter
Charts
Sparklines
Stock Chart
TreeMap
Waterfall Charts

From the very Simple
A Kendo UI AutoComplete Widget

To the very Complex
A Kendo UI Scheduler

From Web essentials
A Kendo UI Grid

To Mobile
A Kendo UI Mobile ActionSheet
Yes, this works Cross-Platform .. And renders adaptively!
Ready?

And Everything in Between
A Kendo UI Donut Chart

Everything ready out of the box
1. DataSource
2. Single Page Application (SPA)
3. Globalization
4. Templates
5. MVVM
6. Validators
7. Effects
8. Drag-And-Drop
9. AngularJS Integration
10. Bootstrap Friendly

First, set References
You can do local or use hosted CDNs
<!DOCTYPE
<html>
<head>
<link
<link
html>
rel="stylesheet" href="styles/kendo.common.min.css"
rel="stylesheet" href="styles/kendo.default.min.css
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>

How do I use Kendo UI?
Well, you know jQuery right?
<div id="calender"></div>
// Select the 'calendar' div
$('#calendar');

That's all
You already know Kendo UI!
<div id="calendar"></div>
// Select the 'calendar' div
// Turn it into a Kendo UI Calendar
$('#calendar').kendoCalendar();
This is Imperative Initialization

Or use semantic HTML
A </div> is a div .. readable markup
<div id="calendarControl" data-
role="calendar"></div> kendo.init(document.body);
This is Declarative Initialization
Use 'data-*' attributes

Widget configuration # 1
Use Properties
<div id="palette" />
$("#palette").kendoColorPalette(
{ columns: 4,
palette: [
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a"
]
});

Widget configuration # 2
Or use 'data-*' attributes
<div id="pallette" data-
role="colorpalette" data-columns="4"
data-palette: "[
'#f0d0c9', '#e2a293', '#d4735e', '#65281a',
'#eddfda', '#dcc0b6', '#cba092', '#7b4b3a']">
</div>
Same results

Let's talk Framework
Out-of-box features of Kendo UI
MVVM
Templates
Data Source

ViewModel Bindings
Built-in MVVM Pattern
<h1 data-bind="html: title"></h1>
<input data-role="slider" data-bind="value: amount"
min="0" max="100">
var viewModel = kendo.observable({
title: 'Hello World!',
amount: 50
});
kendo.bind(document.body, viewModel);
Bindings are 2-Way!

MVVM in Action
UI & ViewModel always in Sync

Templates are Slick
Named & Parameterized
<script id="someTemplate" type="text/x-kendo-
template"> Hello, #= firstName # #= lastName #
</script>
<script>
var scriptTemplate = kendo.template($("#someTemplate").html
var scriptData = { firstName: "John", lastName: "Doe" };
// Guess the output?
$("#script").html(scriptTemplate(scriptData));
</script>
Use as repeatable
markup!

Data Source
A Developer's best friend!
1. Proxy for Data bindings with Kendo UI widgets
2. Works with local or remote data
3. Consistent API
4. Easy CRUD operations on data source
5. Shareable between widgets
6. Paging, Sorting, Filtering - client/server side

Data Source Hookup
<div id="products"></div>
<script type="text/x-kendo-template" id="template">
<h3>#:ProductName#</h3>
</script>
<script>
$(function() {
var template = kendo.template($("#template").html());
var dataSource
transport:
= new kendo.data.DataSource({
{
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"}
},
change: function() {
$("#products").html(kendo.render(template, this.view()));}
});
dataSource.read();
});
</script>
Remote data bindings

Data Source in Action
Seeing is believing

Easy CRUD Operations
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource =
transport:
read:
new kendo.data.DataSource({
{
{
url: crudServiceBaseUrl + "/Products", dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl
},
destroy: {
},
create: {
}
+ "/Products/Update", dataType: "jsonp"
+ "/Products/Destroy", dataType: "jsonp"
+ "/Products/Create", dataType: "jsonp"
},
batch: true,
pageSize: 20
});
Configure service endpoints

Data Edits Simplified
Grid Edit Modes - Inline/Popup/Batch!

I get the Chi .. how do I start?

We love Open Source
Web UI
Mobile UI
Yup, it's Free .. there is no
catch!
Kendo UI Core is on GitHub - Use it. Fork it.

Server-Side Wrappers
Renders HTML5 Kendo UI Widgets
ASP.NET MVC
PHP
JSP
Pick your server stack!

Angular JS Integration
Directives to render Kendo UI Widgets
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemo">
<div ng-controller="AutoComplete">
<h4>Select Telerik Product: </h4>
<input kendo-auto-complete ng-model="product" k-data-source="productNames"/>
</div>
</div>
<script>
angular.module("KendoDemo", [ "kendo.directives" ])
.controller("AutoComplete", function($scope){
$scope.productNames = [
"Telerik Kendo UI",
"Telerik AppBuilder",
"Telerik UI for ASP.NET"
];
})
</script>

App Building Blocks
SPA
Component
s Routers
Layouts
Views
Everything you need - out of the box!

Router
SPA Components Breakdown
Tracks application state
Manages navigation between states
Integrates into browser history stack
Application states become bookmarkable
Supports parameters for routes to entities

Router in Action
URL Change fires events
<div id="demo">
<a href="#/">Home</a>
<a href="#/about">About</a>
</div>
var router = new kendo.Router();
router.route('/', function(e) {
// Event Handler
});
router.route('/about', function(e) {
// Event Handler
});
router.start();

Layouts & Views
SPA Components Breakdown
Layout is the container for Views
View is a chunk of markup
Views have a corresponding ViewModel
Views render when URL changes

Layout in Action
Like a container Master
page<div id="demo"></div>
<script type="text/x-kendo-template" id="layout">
<div id="layout">
<ul data-role="menu">
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
</ul>
</div>
</script>
var layout = new kendo.Layout('#layout');
var router = new kendo.Router({
init: function() {
layout.render('#demo');
}
});
router.start();

View in Action
HTML markup with ViewModel binding
var homeModel = kendo.observable({
title: 'Home'
});
var home = new kendo.View('#home',{ model: homeModel });
var layout = new kendo.Layout('#layout');
var router = new kendo.Router({
init: function() {
layout.render('#demo');
}
});
router.route('/', function(e) {
layout.showIn('#someContainer', home);
});
router.start();

Let's talk Mobile ...
Use Web skills to make Mobile Apps!

Kendo UI Mobile
Build Hybrid or Mobile Web apps
Completely Open Source & Free!
Bower install to any project
Has Angular Directives to render
Totally Cross-Platform

Hybrid Mobile Apps
Kendo UI Mobile powered
Best with AppBuilder
Use Cordova Plugins for Native API
Respective App Store
presence

Remember the UI Widgets
A complete application toolset for building hybrid and mobile web applications
ActionSheet
ButtonGroup
Drawer
Forms
ListView
MobileButton
ModalView
NavBar
PopOver
Scroller
ScrollView
SplitView
Switch
TabStrip

Mobile App Architecture
Building Blocks with Kendo UI Mobile
Kendo UI Mobile includes App Framework
App container initializes all UI widgets Apps
are made of Views
Views can share Layouts - like TabStrips or NavBar
Heavy usage of 'data-*' attributes
UI Widgets render adaptively or use Flat theme
Transitions add to Native feel
True single code base for Cross-Platform apps

Kendo UI Mobile Basics
Views, Layouts & Initialization
<div class="app">
<div data-role="view" data-title="Home" id="home" data-layout="main"></div>
<div data-role="view" data-title="About" id="about" data-layout="main"></div>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="#about" data-icon="about">About</a>
</div>
</div>
</div>
</div>
// Initialization
new kendo.mobile.Application('.app');

Kendo UI Mobile
Flexibility for Developers
Plays well with others
Offline capabilities Flat
Themes
OS Adaptive Rendering

Feel the Zen
Tooling that truly helps
Interactive Dojo
Web ThemeBuilder
Mobile ThemeBuilder
Chrome Inspector
Demos | Forums | Docs

Modern Web & Mobile Done Right!
kendoui.com | @KendoUI

Telerik Kendo UI Overview

More Related Content

Telerik Kendo UI Overview