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

  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

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

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

JSP

PHP

ASP.NET MVC

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

Web ThemeBuilder

Mobile ThemeBuilder

Chrome Inspector

Demos | Forums | Docs

Interactive Dojo

Modern Web Done Right!

kendoui.com | @KendoUI

Made with Slides.com