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

Carl Bergenhem

Manager, Sales Engineering

Matt Shuster

Account Executive

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

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

Made with Slides.com