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

Responsive UI Built-in

Adaptive Rendering of Complex Widgets

Media Queries power Kendo UI widgets ..

For any device form factor - Desktop/Tablet/Phone!

And Everything in Between

A Kendo UI Donut Chart

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

Let's code

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>

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


    <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

Let's talk Framework

Out-of-box features of Kendo UI

MVVM

Templates

Data Source

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!

MVVM in Action

UI & ViewModel always in Sync

Templates are Slick


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

Named & Parameterized

Use as repeatable markup!

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

Data Source in Action

Seeing is believing

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
    });