Fast, Light, Complete
70+ jQuery-based UI widgets in one toolset
AngularJS Integration | Bootstrap Theme
Extensive Data Visualization Support
Mobile Specific Widgets | App Tooling
Modern Comprehensive HTML5/JS Framework
Touch Support | Adaptive Rendering
JS Framework Agnostic | No lock in
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
Sortable
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 Visualization
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
Application Framework
- DataSource
- Single Page Application (SPA)
- Globalization
- Templates
- MVVM
- Validators
- Effects
- Drag-And-Drop
- AngularJS Integration
- Bootstrap Friendly
Everything ready out of the box
Basic development flow
First, set References
You can do local or use hosted CDNs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
Then
Well, you know jQuery right?
<div id="calendar"></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
You can also use semantic HTML
<div id="calendarControl" data-role="calendar"></div>
kendo.init(document.body);
This is Declarative Initialization
Use 'data-*' attributes
A </div> is a div .. readable markup
Or use AngularJS!
Text
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>
Let's talk Framework
Out-of-box features of Kendo UI
Data Source
A Developer's best friend!
-
Proxy for Data bindings with Kendo UI widgets
-
Works with local or remote data
-
Consistent API
-
Easy CRUD operations on data source
-
Shareable between widgets
-
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 = new kendo.data.DataSource({
transport: {
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
Easy CRUD Operations
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products", dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp"
}
},
batch: true,
pageSize: 20
});
Configure service endpoints
ViewModel Bindings
<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);
Built-in MVVM Pattern
Bindings are 2-Way!
Server-Side Wrappers
Text
Renders HTML5 Kendo UI Widgets
Pick your server stack!
Mobile Apps
Text
Kendo UI Mobile powered hybrid apps
Use Cordova Plugins for Native API
Respective App Store presence
Feel the Zen
Tooling that truly helps
Modern Web Done Right!
kendoui.com | @KendoUI
Copy of Kendo UI
By Ignacio Fuentes
Copy of Kendo UI
An introduction to Kendo UI
- 916