Fast, Light, Complete

70+ jQuery-based UI widgets in one toolset

Angular | React |Vue.JS | Bootstrap Friendly

Extensive Data Visualization Support

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

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
PivotGrid
ProgressBar
Scheduler
Slider

Sortable

 

Splitter

Spreadsheet
TabStrip
TimePicker
ToolBar
Tooltip

TreeList
TreeView
Upload
Window

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. Bootstrap 3 and 4 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

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 & Core 1.0 and 2.0

Feel the Zen

Tooling that truly helps

Progress Sass ThemeBuilder

Chrome Inspector

Demos | Forums | Docs

Interactive Dojo

The Most Complete Ui Library for Data-Rich Web Applications

https://www.telerik.com/kendo-ui 

Made with Slides.com