Kendo UI Deep Dive

A deeper look in to Kendo UI usage

Agenda

• Introductions

• Responsive Web Design

• Export to Excel & PDF

• Kendo UI vs. UI for ASP.NET MVC/JSP/PHP

• 3rd Party Integration

• RequireJS

• AngularJS

• Backbone

• Bootstrap

• Custom Themes with ThemeBuilder

• Q & A

Introductions

Responsive Web Design

• Kendo UI was built for RWD

• Most Kendo UI widgets adhere to parent width already

• More complex widgets have extra rules

• "Adaptive Rendering"

• Specifically the Grid and the Scheduler

• Can also be responsive via JavaScript

• kendo.resize();

RWD Demos

RWD Demos

• Kendo UI - Automatic Responsiveness

• Charting - Responsive Chart

• Grid - Automatic Responsiveness

• Grid - Adaptive Behavior

• Scheduler - Adaptive Behavior

Export to Excel

• Kendo UI provides client-side export to Excel support

• No need for a server-side library!

• Released with Q3 2014

• Kendo UI dev team created a Workbook JS class

• Can work independently from our UI widgets

• Also built-in to several UI components

Export to PDF

• Kendo UI also offers export to PDF support

• Completely client-side

• Works in all modern browsers (IE 9+)

• Integrated to our Drawing API

• Can work with generic HTML

• Built-in to many of our UI components

• Grid, Scheduler, etc.

Export Demos

Export Demos

• Kendo UI - Create Excel file

• Grid - Export to Excel

• Kendo UI - Create PDF file

• Grid - Export to PDF

Kendo UI or Wrappers?

• Telerik offers UI components for

• ASP.NET MVC, PHP, and JSP

• These are all based on Kendo UI

• Kendo UI vs. UI for ASP.NET MVC/JSP/PHP

• Why use any of the wrappers?

• Use familiar server-side options for configuration

• JSP tags, WebForms or Razor syntax etc.,

• Same widgets and feature, less JavaScript

ASP.NET MVC Wrapper

// HTML
<input id="myDatePicker" />

// JS
$(document).ready(function() {
  $("#myDatePicker").kendoDatePicker();
});

// WebForms syntax
<%= Html.Kendo().DatePicker()
        .Name("myDatePicker")
%>

// Razor syntax
@(Html.Kendo().DatePicker()
      .Name("myDatePicker")
)

HTML

ASP.NET MVC

vs.

JSP Wrapper

// HTML
<input id="myDatePicker" />

// JS
$(document).ready(function() {
  $("#myDatePicker").kendoDatePicker();
});

// JSP tags
<kendo:datePicker name="myDatePicker"></kendo:datePicker>

HTML

JSP

vs.

PHP Wrapper

// HTML
<input id="myDatePicker" />

// JS
$(document).ready(function() {
  $("#myDatePicker").kendoDatePicker();
});

// PHP classes
<?php
  $datePicker = new \Kendo\UI\DatePicker("myDatePicker");
  
  echo $datePicker->render();
?>

HTML

PHP

vs.

3rd Party Integration

AngularJS

• Kendo UI offers AngularJS directives for all UI widgets

• Introduced with Q2 2014

• Works with both declarative syntax and $scope initialization

• Seamless integration with existing AngularJS apps

• Easily work with ng-* along-side with Kendo UI

• Kendo UI DataSources can work with $http and services

AngularJS - Demo

RequireJS

• Kendo UI libraries built to support RequireJS

• Easily load just the JS that you need

• Avoid using kendo.all.min.js

• Use RequireJS just like normal

• Kendo UI can automatically integrate

RequireJS - Demo

<div id="grid"></div>
<select id="ddl"></select>

<!-- Load the jQuery and RequireJS files from CDN -->

<script data-main="http://kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"
        src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>

<script>
  //include the needed Kendo UI widgets scripts
  require([ "kendo.dropdownlist.min", "kendo.grid.min" ], initApp);

  function initApp() {
    //you can initialzie the Kendo UI components here
    $('#grid').kendoGrid({
      dataSource:{
        data: [{name: "John Doe"}]
      }
    })

    $('#ddl').kendoDropDownList({
      dataSource: {
        data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
      },
      dataTextField: "name",
      dataValueField: "value"
    })
  }
</script>

Backbone

• Kendo UI has no problem working with Backbone

• No changes are needed just for the view

• Just add Kendo UI and you're good to go!

Bootstrap

• Kendo UI works seamlessly in a Bootstrap app

• Kendo UI CSS classes built with Bootstrap in mind

• Telerik offers a separate Bootstrap theme

• For a more integrated look and feel

• Coming soon:

• Custom theme generator

Bootstrap - Demo

Kendo UI ♥ Bootstrap

Kendo UI ThemeBuilder

• Easy-to-use tool for custom themes

• Pick an existing theme and tweak

• No need to work with CSS!

• All changes can be see on the page as they're made

• Available as a bookmarklet

• Use it on any page! Even internal sites

• Great to use when discussing design choices

• Export theme in CSS or LESS

• Just refresh page to revert changes!

ThemeBuilder - Demo

Kendo UI ThemeBuilder

Mobile ThemeBuilder

Roadmap

• Q3 2015 coming in a few weeks

• Q3 2015 beta came out today!

• http://demos.telerik.com/kendo-ui/Beta

• Highlights include

• AngularJS 2.0 support (beta)

• Web component support (beta)

• Spreadsheet component (not on demo page)

• Bootstrap theme converter

• New "Nova" theme

Q & A

Thanks for attending!

For questions email

matt.shuster@telerik.com