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

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

Kendo UI Deep Dive

By Carl Bergenhem

Kendo UI Deep Dive

A look in to how Kendo UI works with, Responsive Web Design, AngularJS, RequireJS, and Bootstrap. Also highlights some Kendo UI features and tools like Export to PDF and Excel, as well as the Kendo UI ThemeBuilder.

  • 1,297