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

MVVM

Templates

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