Kendo UI Core - The Free jQuery Widget Library

This week, Telerik announced that it was releasing a version of the popular Kendo UI JavaScript library that was completely open source and free; Kendo UI Core. If you aren’t familiar with Kendo UI, it’s a jQuery based JavaScript framework that brings HTML5 to all browsers (back to IE 7) both desktop and mobile.

Kendo UI is a full front-end framework. That means that it has all of the UI widgets that you would be used to using and a whole lot more. Here’s a list so you get a feeling for what exactly is in Kendo UI Core

  • AutoComplete
  • Calendar
  • ComboBox
  • DatePicker
  • DateTimePicker
  • DropDownList
  • ListView
  • Menu
  • NumericTextBox
  • PanelBar
  • Slider
  • Splitter
  • TabStrip
  • TimePicker
  • Tooltip
  • Window
  • Sortable
  • Progress
  • Button
  • Color Picker
  • Toolbar
  • MultiSelect
  • MaskedTextBox
  • Notification

It is also a full MV* framework, which means that it contains everything you need to build a SPA. These are called “framework” components.

  • DataSource
  • MVVM
  • SPA
  • Effects
  • Drag & Drop
  • Validator

One of the very unique things about Kendo UI is that you don’t have to adopt the entire framework to use just a widget. Many frameworks as comprehensive as this one require you to adopt a pattern, but Kendo UI requires only a basic knowledge of jQuery. This means that you could use it for just a DatePicker if that’s all you need.

<input id="dpicker" type="datetime" />

<script>
  $('#dpicker').kendoDatePicker();
</script>

However, if you wanted to build a SPA with Kendo UI, you can do that too. You don’t need another framework to structure your Kendo UI code. Everything is provided for you.

You may WANT to use your favorite MV* framework and just the Kendo UI Core widgets. Right now, that’s probably AngularJS. Telerik provides the AngularJS integrations for Kendo UI for free as well - also completely open source.

But Wait, There’s More

Also in Kendo UI Core is all of Kendo UI Mobile. Kendo UI Mobile is a framework for building mobile applications (usually hybrid) that respond to the device they are running on so that you can get that native look and feel everywhere.

That means you can create mobile applications with Kendo UI Core as well. Kendo UI Mobile includes:

  • ActionSheet
  • Button
  • ButtonGroup
  • Drawer
  • ListView
  • ModalView
  • NavBar
  • PopOver(tablet)
  • Scroller
  • ScrollView
  • Switch
  • TabStrip
  • Application
  • Forms
  • Touch Events
  • View
  • SplitView(tablet)

Kendo UI Mobile widgets use the same framework as the web widgets and you can use the mobile widgets with the web widgets if you want to.

Kendo UI Core also includes first class support for Twitter Bootstrap to make it easy to quickly layout your application.

How Do I Get It?

You have a few options:

There are also some great free tools available, including the Kendo UI Dojo for learning Kendo UI and working with shareable Kendo UI Snippets. There is also the Kendo UI Chrome Inspector for the Chrome DevTools as well as npm packages like Kendo Linter which will check your JavaScript and HTML for any Kendo UI errors.

What’s The License?

The license is Apache 2, which means it’s free to use however you wish. Download it, fork it, change it - it’s completely free to use even in a commercial context.

What’s The Catch?

There is no catch. Telerik has built a business on creating gorgeous UI tools. As an employee of Telerik and an original Kendo UI team member, I can tell you that we have wanted to do this for a long long time. The professional grade widgets such as the Grid, Editor, TreeView and Scheduler will remain a part of the Kendo UI Professional package, complete with support. If you find yourself in need of support or these professional grade widgets, you can always purchase the pro edition.

The Apache 2 license opens up Kendo UI to a whole world of developers who might not have considered Kendo UI before due to pricing constraints.

What’s The Future Of Kendo UI

Unfortunately, our industry has rather bad track record of just open sourcing software they have given up on. That’s the old meaning of open source. The new meaning of open source is projects that are active and aggressively maintained and released all in the open. Kendo UI is being open sourced under the new meaning; the same way that jQUery is open source, Angular is open source and Bootstrap is open source.

There are 12 full time engineers continuing to work on Kendo UI Core as an open source project. We will continue to do three major realeases a year with a minor one in between each major. That’s 6 releases a year. The only difference is that now all of the development on Core will be done in the open and YOU can be a part of that release if you choose to be.

Contribute

The quality of Kendo UI Core remains paramount, so make sure you read the contribution guidelines before submitting a pull request. Also, feel free to open issues if you think you have found a bug, but make sure you include a Kendo UI Snippet replicating the issue. Feature requests should go to our feedback portal at kendo.uservoice.com, and questions should be sent as support tickets or forum posts if you are a Kendo UI license holder. If not, please consult the all powerful StackOverflow.

From Our ❤︎ To Yours

This is an incredibly proud day for all of us who work on Kendo UI. The fact that Kendo UI Core is now free to use is the way we have always envisioned it. That day is today. We can’t wait to see what you build with Kendo UI Core.

I think the Bootstrap team said it best when they said, “built with all the love in the world”.

A Kendo UI ASP.NET MVC SPA Template

I saw a question on Stack Overflow once where someone was asking for architectural advice on whether or not to use Hot Towel with Kendo UI for a Single Page Application (SPA). My first thought was “What is Hot Towel”?

I took to the Google’s and quickly learned that it’s the creation of John Papa. It’s an ASP.NET MVC project template that gets you up and running with a properly structured SPA, taking care of all of the tedious scaffolding for you. What stood out the most to me about the template, is how well done it was. You get all of the necessary JavaScript libraries, and you get your project properly structured for you so that you are building on top of best practices from square one. Single Page Applications are tedious to setup, and Hot Towel made it trivial to get up and running in about two clicks.

Hot Towel is based on Durandal (amongst several other libraries), and while I don’t use Durandal, I just loved the idea of Hot Towel. I was so inspired by this project that I began work on a Kendo UI ASP.NET MVC SPA Template that would be very similar to Hot Towel, but built entirely on Kendo UI. As of today, the project has officially been released into the Visual Studio Extension Gallery.

What’s In The Project Template

Out of the box, I’ve included…

Installation

Download the .vsix here, or grab it from the Visual Studio Extension Gallery.

This is an MVC 4 project template, so do File / New Project / C# / Web / ASP.NET MVC 4 Web Application.

Then Select The Kendo UI SPA MVC Project Template.

And…

BAM!

Go ahead and run that there project. You have a Kendo UI SPA baby.

Out of the box, I gave you Kendo UI Web and used it’s lovely Bootstrap 3 integration which is why the whole thing is built on Bootstrap 3 itself, complete with responsive navbar and icons powered by Font Awesome. This is pure hotness right here folks. Only the best for you though. Now that you are an official hipster, I can let you in on the best part of this whole package - RequireJS.

RequireJS Foundation

The application is built on top of RequireJS. If you haven’t used RequireJS before, the next few moments might be a little uncomfortable, but don’t black out. You can always read the RequireJS Fundamentals article after this which goes into more depth. For now, just know that I’ve done all of the dirty work for you which should make your life much easier. I think you’ll get the hang of it very quickly. So here is how it works…

The HomeController opens the Index view in the Home folder. No surprises there. Let’s crack open the index.cshtml file and have a look.


@using System.Web;
@using System.Web.Optimization;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  @Styles.Render("~/Content/css")
  <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
</head>
<body>

  <div id="applicationHost">

    <!-- The application is rendered here -->

  </div>

  @Scripts.Render("~/scripts/vendor");
  <script src="@Url.Content("~/Scripts/require.js")" data-main="@Url.Content("~/App/main")"></script>
</body>
</html>

All that noise in the head of the file is from HTML5 Boilerplate. It’s the necessary meta tags to make sure you use the latest rendering mode in IE as well as ensuring that your page doesn’t zoom out on mobile devices.

You can check out the BundleConfig, but just know that it bundles jQuery, a small plugin called “pubsub” that I’ll talk about shortly, a universal console logging shim called “debugger” and all of the Bootstrap.js. The most interesting part of this page is where RequireJS is loaded and it in turn loads the App/main.js file. That’s where the app catches fire, so lets take a look at the main.js file.

main.js


require.config({
  paths: {
  'text': '../Scripts/text',
  'kendo': 'vendor/kendo/kendo',
  }
});

define([
  'kendo',
  'app'
], function (kendo, app) {
  app.start();
});

The top part of this code defines a path to the RequireJS Text plugin which is going to allow us to load HTML partials dynamically from JavaScript. The second defines a path for Kendo UI. What this does is load in the kendo.js file which in turn loads the necessary modules of Kendo UI.

The second part loads in the app.js file and calls it’s start method which starts a Kendo UI router and ignites the application.

app.js


define([
  'kendo',
  'views/layout/layout',
  'views/home/home',
  'views/details/details'
], function (kendo, layout, home, details) {

  // the application router
  var router = new kendo.Router({
    init: function () {

      // render the layout first
      layout.render("#applicationHost");
    },
    routeMissing: function (e) {
      debug.error('No Route Found', e.url);
    },
    change: function (e) {

      // publish an event whenever the route changes
      $.publish('/router/change', [e]);
    }

  });

  // define new routes here
  
  router.route('/', function (e) {
    layout.showIn("#content", home);
  });

  router.route('/details', function (e) {
    layout.showIn("#content", details);
  });

  return router;

});

Soak that bad boy in for a second. At the top of each JavaScript file, you will find a define function. These are like your include or import statements. These are the files that this JavaScript file depends on in order to run. These could be JavaScript files, but they can be text files to. You will notice that none of the included files have a js on the end, and that’s because it is always assumed that they are .js files. RequireJS uses these define methods to know what dependencies your JavaScript file has.

You may have noticed the $.publish method in the router change event. This is part of our pubsub architecture and we’ll talk about it more in just a moment. Now we know that the main file loads the app file which in turn creates a router which loads the views.

App/views

All of the views work the same way. The .js file loads in the template, specifies it as the HTML for the view, specifies the ViewModel and then returns back the view object. The layout is just a special type of view which contains common navigation components (a Bootstrap responsive NavBar in this case) as well as handles loading and unloading views.

The html files are loaded into their respective .js files using the RequireJS text plugin. Anytime you see text!, that’s telling RequireJS to load that in as plain text. In this way, we can load in external template files and use them. Pretty neat right?

Take a minute to examine the Home view. The details.js view is nearly identical save for the obvious difference in name.

App/view/home/home.js


// specify kendo ui and the home.html files as dependencies  
define([
  'kendo',
  'text!views/home/home.html'
], function (kendo, homeTemplate) {

  // create a view model to bind to the homeTemplate
  var viewModel = kendo.observable({
    title: "Home"
  })

  // create a new view with the loaded template
  // animate the view whenever it shows by fading it in
  var view = new kendo.View(homeTemplate, {
    model: viewModel,
    show: function () {
      kendo.fx(this.element).fade('in').duration(500).play();
    }
  });

  // return the kendo ui view object
  return view;

});

You can see where kendo (which is Kendo UI) and the home.html file are loaded in as dependencies. RequireJS will make sure these files are loaded before it tries to execute the code in the function. The main function declares a view model and then a new Kendo UI View, using the home.html template as the contents of the view. I added a bit of animation on the view show method to fade the contents in.

The layout.js file is a bit more complex.

App/views/layout/layout.js


define([
  'kendo',
  'text!views/layout/layout.html'
], function (kendo, layoutTemplate) {

  var nav;

  var viewModel = kendo.observable({
    // these are the links in the navbar
    links: [{ title: 'Home', href: '#/', icon: 'home', icon: 'fa fa-home' },
            { title: 'Details', href: '#/details', icon: 'fa fa-ellipsis-h' }]
  });

  var layout = new kendo.Layout(layoutTemplate, {
    model: viewModel,
    init: function (e) {
      // store a reference to the nav-links element 
      nav = e.sender.element.find('#nav-links');
    }
  });

  // when the router change event is published...
  $.subscribe('/router/change', function (e) {

    // select a nav link based on the current route
    var active = nav.find('a[href="#' + e.url + '"]').parent();

    // if the nav link exists...
    if (active.length > 0) {

      // remove the active class from all links
      nav.find('li').removeClass('active');

      // add the active class to the current link
      active.addClass('active');
    }
  });


  return layout;

});

This is exactly what we saw in the home.js file. We load in a template, create a view model, create a layout based on the template and return the Kendo UI Layout element. There is one big difference here. You can’t help but notice that $.subscribe method hanging out at the end of the file there. What is that?

PubSub

You may have heard the trendy “pubsub” phrase thrown around before. If you aren’t familiar with it, the idea at it’s core is simple; subscribe to a message and do something when that message is published. The reason we do this is that it allows us to very loosely couple our modules. What the subscribe event in the layout.js file is doing is changing the right navbar link to be highlighted depending on what the current route is. That event is being published by the router in the app.js file. Normally we would adjust our API so that we could call some method on the layout.js file from the router. However, this causes API mutation and inconsistency as you try and make all of your views return the same API. It’s easier to use pubsub and keep those methods internal.

Do you recall the $.publish method? Here it is again…


...

// publish an event whenever the route changes
$.publish('/router/change', [e]);

...

This is a message being published. The message that gets published is “/router/change”. We could format the message any way we like, but we format it like a URL to keep things clean and consistent. Whenever the URL of this application changes, the change event on the route is fired and that “/router/change” message is published. Along with it goes the “e” argument from the change event. The “$.subscribe” method in the layout.js file is listening for this message and responds by adjusting CSS classes on the navbar.

You might think “why not just attach an event handler the navbar element?” On first glance, this seems like it would solve the problem the most direct way. However, we need the navlinks to update their active status even if they AREN’T clicked. Consider someone coming directly to the “Details” page. We want the “Details” link to be highlighted even though the details link was never actually clicked. By tying into the Router change event, we can update the navbar to match the current page in the application, regardless of whether or not the navbar is ever clicked.

The last thing we need to examine in terms of app structure, is the kendo.js file.

App/vendor

Kendo UI is a MASSIVE framework. It’s modular though, and it’s also aware of RequireJS and each module knows it’s own dependencies. Out of the box, the Kendo UI MVC SPA Template only uses the Kendo UI View, Router and Fx (for view transition animations). Let’s have a look at the kendo.js file in the “vendor” folder.


// add new Kendo UI modules here to have them included
define([
  '../Scripts/kendo/2013.3.1119/kendo.router.min',
  '../Scripts/kendo/2013.3.1119/kendo.view.min',
  '../Scripts/kendo/2013.3.1119/kendo.fx.min'
], function () {
  return kendo;
});

The required Kendo UI modules are being included at the top. If I was to add a Kendo UI DropDownList to this application, I would add a kendo.dropdownlist.min include to the top of this file. Any other modules that the DropDownList depends on, like kendo.popup.min will be automatically loaded thanks to Kendo UI’s integration with RequireJS.

Adding A Build

Unfortunately, I can’t confirm whether or not you have Node installed on your system. If you do, you can run the RequireJS build tool. I’ve already included an app.build.js file which can be run with the optimizer to concatenate and minify all of your App JavaScript files into one main-built.js file. You can add the following to your post-build events and it will call this file for you.


if $(ConfigurationName) == Release node $(ProjectDir)/Scripts/r.js -o $(ProjectDir)/app-build.js

Now when you switch to release mode, Visual Studio will call the RequireJS optimizer from Node and “compile” your App JavaScript. You just need to go into your Home/Index.cshtml file and switch the data-main from main.js to main-built.js. You can automate that part as well by using #DEBUG and #RELEASE compile flags.

And Lastly, Font Awesome

I’m ALWAYS in search of icons when I build my apps. I feel like I’ve spent more of my life perusing icon packs than I have actually building applications. Font Awesome changes all that by delivering 369 completely free icons as an icon font. Since we are using Bootstrap, it integrates right in. You can use an icon anywhere you wish. For instance, if you wanted an icon for say a chart, you would first go to the Font Awesome “icons” page and search for “chart”. Click on the icon you want to use. You will be taken to another screen where you will get a large preview of the icon AND the html that you need to use to make that icon appear. In the case of the chart, it looks like this…

I Would Like To Thank…

My mother for always believing in me and John Papa for creating the really awesome “Hot Towel” SPA template. I could not have created the Kendo UI SPA package without being able to closely examine what John did and copy much of his setup code for the VSIX. Creating VSIX installers is not for the faint of heart and there is no way I would have gotten through it without someone else’s code to examine and learn from.

I have also pushed my VSIX package to GitHub in case you hate yourself and want to try and create one of your own.

That’s the Kendo UI SPA MVC Template. Got suggestions? Ideas for making it better? I would LOVE to see your pull requests and changes. This is a v1 release and by no means feature complete. I think that proper project templates are absolutely essential to developers and I want to make sure that this template is “proper” in every since of the word.

Kendo UI Yeoman Generator v1 Is Fresh Out The Kitchen

About a year after I promised Addy I would get this done, the first version of the Kendo UI Yeoman generator has arrived. The goal of this generator for me was to get an understanding of how Yeoman generators are built and to create a very basic generator that could be extended for all manor of project scenarios.

So let’s get it running…

> npm install -g generator-kendo-ui

You might have to sudo that if you get a permissions error.

Now create a new Kendo UI Project with Yeoman

> mkdir new-project && cd new-project
> yo kendo-ui

You will be greated with the out-of-the-box components list. All are selected by default. Right now you get Bootstrap, Modernizr and RequireJS. If you select Bootstrap, the generator will use the Kendo UI Bootstrap CSS integrations as well as include the bootstrap.js file in the index page. If you de-select Bootstrap, it will use the Kendo UI default styles and that is all.

Modernizr gets added to your page automatically unless you de-select it.

RequireJS just gets copied to your project’s scripts directory. It’s really just saving you from having to type bower install requirejs. You’re welcome.

You can run the project (with LiveReload capabilities) by running…

> grunt serve

Upcoming Tasks

Here are a few of the items that I would like to see incorporated into this generator for a good v1:

  • Add concat/minify grunt tasks
  • If RequireJS is chosen, wire up a simple main file
  • Add CoffeeScript support
  • Add test framework support
  • yo kendo-ui:spa
  • should generate a boilerplate SPA application
  • Add express as a choice when creating the application
  • Add FontAwesome if Bootstrap is chosen

If you have any other suggestions or ideas, PLEASE feel free to fork and send a pull request.

Hugs and kisses to everyone for Valentine’s day.