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

  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

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!

  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

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

Configure service endpoints

Data Edits Simplified

Grid Edit Modes - Inline/Popup/Batch!

I get the Chi .. how do I start?

We love Open Source

Text

Application Framework

Web UI

Mobile UI

Kendo UI Core is on GitHub - Use it. Fork it.

Yup, it's Free .. there is no catch!

Kendo UI Professional

Text

For Enterprise apps

  1. Grid | PivotGrid

  2. Barcode | QR Code

  3. Scheduler | Gantt

  4. Editor | Upload

  5. Gauge

  6. Diagram

  7. Map

  8. Data Visualization | ~20 Types

Feature-rich with consistent API

Server-Side Wrappers

Text

Renders HTML5 Kendo UI Widgets

Pick your server stack!

JSP

PHP

ASP.NET MVC

Let's hit the SPA ...

App Building Blocks

Text

SPA Components

Everything you need - out of the box!

Views

Layouts

Routers

Let's talk Mobile ...

Use Web skills to make Mobile Apps!

Kendo UI Mobile

Text

Build Hybrid or Mobile Web apps

Bower install to any project

Totally Cross-Platform

Completely Open Source & Free!

Has Angular Directives to render

Hybrid Mobile Apps

Text

Kendo UI Mobile powered

Use Cordova Plugins for Native API

Respective App Store presence

Best with AppBuilder

Kendo UI Mobile

Flexibility for Developers

Plays well with others

Offline capabilities

OS Adaptive Rendering

Flat Themes

Feel the Zen

Tooling that truly helps

Web ThemeBuilder

Mobile ThemeBuilder

Chrome Inspector

Demos | Forums | Docs

Interactive Dojo

To Recap ..

Something for everyone

Kendo UI Core

Kendo UI Professional

Application Framework | Web | Mobile | Completely Free

Enterprise UI | Licensed per Developer | Support & Maintenance

Let's talk Office 365 Development

Can Kendo UI help?

Office 365 Development

Text

Your Choices

Kendoka says - Go HardCore!

Powered By Data Services!

Visual Studio

'Napa' In-Browser Client

Office 365 Developer Subscription ..

Now INCLUDES Kendo UI Professional

Announcement

And a new             Kendo UI Theme!

Modern Web & Mobile Done Right!

kendoui.com | @KendoUI

Kendo UI + Office 365

By Sam Basu

Source: Telerik DevRel

Kendo UI + Office 365

An introduction to Kendo UI for Office 365 Development

  • 2,154

More from Sam Basu