Welcome to my blog, if there’s something I didn’t cover feel free to leave me a comment below and I will respond as soon as humanly possible. The topic of today’s article is an in-depth review of Kendo UI Framework.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
Link Examples GitHub Repo
 
 

Intro

 
This is Part 4 in a multipart series called: “Best HTML5 Mobile App Frameworks”
 
 
Note: I have no intention of stopping writing after I review Kendo UI. If you want me to review a framework you like or know about, just write me a comment below.
 

What Is Kendo UI?

 
Kendo UI is a framework for modern HTML UI, by Telerik. Following the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package, complete with AngularJS integration and Bootstrap support. It is comprised of an open source Core edition, and a commercial set of enterprise-grade features. You can think of it as jQuery Mobile on steroids.
 
Because this is a commercial product it comes in two separate packages. First one is called Kendo UI Core and it’s open source, another one is called Kendo UI Professional and you will need to pay for it. I will talk about Core edition because this is a version you are going to start with.
 
Core edition contains 40 web widgets, all of the mobile widgets as well as the mobile application framework, and the core functionality of Kendo UI framework, including the DataSource component, templates, drag-and-drop, and themeable widgets with integrated animations as well as AngularJS directives.
 
Kendo UI is built on jQuery. If you are more familiar with the jQuery $, then Kendo UI is going to be very comfortable for you. It is engineered to be lightweight and extremely fast. There has always been a focus on speed from day 1, all the way from the UI widgets, down to the core of the framework where the templates and MVVM framework live.
 
Kendo UI is a successful mix of several different development philosophies. On one side, you can use it in a similar fashion like jQuery Mobile, through HTML5 markup (with intersecting JavaScript). On the other side, you can use it just like Ionic/Onsen UI framework, using Angular as application building block. Both approaches have their pros and cons; first one will appeal to novice developers while the second one will attract more experienced ones.
 

What Kendo UI is not?

 
If you prefer object-oriented development, then Kendo UI is not for you. Nothing prevents you from using OOP with Kendo UI; unfortunately, Kendo UI is not built around OOP (like Sencha Touch).
 
Kendo UI is a commercial product and it does not have the same kind of backing of an open source community. This increases the cost of overall development.
 

Main features

 
  • Licensed under the permissive Apache v2 license
  • Simple to Use
  • Built around AngularJS
  • Built-in Theme Roller support
  • Supports native app packaging system
  • Usable for mobile and classic web development
  • 40 widgets included into core edition
  • Very fast customer support
 

Code example

 

HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Kendo UI Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <!-- Header && Footer-->
  <div data-role="layout" data-id="app-toolbar">
    <div data-role="header">
      <div data-role="navbar">
        <a href="#panel" data-rel="drawer" data-role="button" data-icon="action" data-align="left">Panel</a>
        <span data-role="view-title">My View Title</span>
      </div>
    </div>

    <footer data-role="footer">
      <div data-role="tabstrip">
        <a data-icon="globe" href="#page1">Page 1</a>
        <a data-icon="organize" href="#page2">Page 2</a>
        <a data-icon="contacts" href="#page3">Page 3</a>
      </div>
    </footer>
  </div>

  <!-- Page 1 -->
  <div data-role="view" id="page1" data-transition="slide:left" data-layout="app-toolbar" data-title="Page 1 header">
    <img src="http://www.winnipeghumanesociety.ca/images/cute-puppy.jpg" title="Some picture" width="50%" height="auto" />
    <ul data-role="listview" data-style="inset">
      <li><a href="#page2">Slide to page 2</a>
      </li>
      <li>Bar</li>
    </ul>
  </div>
  <!-- Page 2 -->
  <div data-role="view" id="page2" data-transition="slide:left" data-layout="app-toolbar" data-title="Page 2 header">
    <a href="#page1" data-role="button">Slide back to page 1</a>
  </div>
  <!-- Page 3 -->
  <div data-role="view" id="page3" data-transition="slide:left" data-layout="app-toolbar" data-title="Page 3 header">
    <a href="#page1" data-role="button">Slide back to page 1</a>
  </div>

  <!-- Sliding  panel -->
  <div data-role="drawer" id="panel">
    Panel
  </div>
</body>

</html>
 

JavaScript:

$( document ).ready(function() {
    var app = new kendo.mobile.Application($(document.body), { skin: 'flat' });
})
 

Example:

 
Demo
 
 
Embedded example:
 
 
Because other reviewed frameworks are using AngularJS I have decided to show you pure jQuery solution here.
 
Continue Reading

  • I just wanted to add a quick note that Telerik’s support for the commercial product is fantastic. I generally submit my issues around the end of the day and have the answer the next morning. It’s extremely rare that I have to reply for further clarification.

  • Drazter

    Hello, I just wanted to ask if I can use your header image for my English project at school because it is pretty cool and will definitely add more style to my work.