Kendo UI Q1 2014 Release Announcement

• New Tools For You
• What's New In Kendo UI Web
• What's New In Kendo UI Mobile
• What's New In Kendo UI DataViz

My favorite day of the year is Christmas. My other 3 favorite days are Kendo UI Quarterly releases since those days are essentially the same thing as Christmas. However, a Kendo UI release is in some ways even better than Christmas since we don't wear a bright red felt outfit and try to come into your house and eat your cookies. Well, Brandon might try and do that but he's on paternity leave, so you're all in the clear.

Today marks one of those special and exciting days as we are proud to release the newest version of Kendo UI, stuffed to the brim with new features, new widgets, big enhancements and all of the goodness that's on the top of every web developers wish list these days.

Enough analogous Christmas banter, here are the numbers...

• 110 issues closed
• 62 enhancements made
• 35 issues resolved for Kendo UI Web
• 27 issues resolved for Kendo UI Mobile
• 48 issues resolved for Kendo UI DataViz

New Tools For You!

Part of what makes Kendo UI a joy to use are the bevy of tools and extensions that are freely available. This includes items like the Kendo UI Linter, the Bootstrapper, ASP.NET MVC Project Templates and much more. Delivering on our theme this quarter of "Powerful, extensible and open" we are happy to enhance that set of tools and extensions by introducing 2 brand new tools for your Kendo UI development.

Kendo UI Scratchpad

Thanks to the hard and diligent work of Alex Gyoshev and others from the engineering team, we have a brand new interactive way for you to work with Kendo UI, and it's called the Kendo UI ScratchPad. Point your browser to trykendoui.telerik.com.

Similar to JSFiddle or JSBin, the Kendo UI ScratchPad allows you to work with Kendo UI in a very fast and informal environment. You can pick your version of Kendo UI, pull in other libraries and view your results in a variety of form factors. The ScratchPad remembers logins and handles versioning as well.

It's never been easier to share your Kendo UI prototypes and examples. The Dojo tutorials are still available, by clicking on the "Tutorials" button at the top.

In addition, all Kendo UI Demos can now be opened in the ScratchPad, so you can tweak the demo right there in your browser. Feel free to fork these demos and use them as a jumping off point for your own projects. Just navigate to any demo and click the big "Edit This Example" button, and you're off and running.

Kendo UI Chrome DevTools

The browser DevTools are where application productivity increases exponentially. Some even build their applications using nothing but the DevTools. How "positively hipster", as Brandon might say. While you (and us) may not be THAT trendy, we do love our DevTools. That's why we created the Kendo UI Chrome Inspector.

The Kendo UI Chrome Inspector automatically inspects your page for Kendo UI widgets. It then lists each one out and allows you to view the widgets configuration, log any events the widgets are firing, and will even debug code to try and find any silly mistakes you might have made in your code. The extension is available TODAY from the Chrome Web Store.

Angular Kendo UI v1.0

Angular developers rejoice; version 1 of the official Angular directives for Kendo UI have arrived. Many of you have been steadily working with us on this project for the last few months. To those of you who took the time to recreate your problems and open issues on GitHub - THANK YOU. Thank you to those who submitted pull requests and gave us input on how you felt the integrations should work.

You can download the official Angular Kendo UI library from the GitHub repo today. As always, these integrations remain completely free and open source. A special note of thanks to Mihai Bazon on the team who has been diligently working through the internals of Angular and Kendo UI to close issues and stabilize this project for version 1.

Whew! Those are the tools and we hope you enjoy them and they shine more light into your Kendo UI projects and bring a smile to your face. Now on to more really good stuff!

Kendo UI Web

This release of Kendo UI Web is very exciting for me and I'll elaborate more on that in a moment. Lets hit the highlights on what's new in Kendo UI Web.

Masked TextBox

This has been a highly demanded widget for some time. It's one that takes a fair amount of thought and planning, but we are pleased to add a Masked TextBox widget the Kendo UI Web arsenal. Usage is straightforward - supply an input and a mask and rock on.

<input id='phone' type="text" />

<script>

  (function(){

    $('#phone').kendoMaskedTextBox({
      mask: '(999) 000-0000'
    });      

  }());

</script>

The textbox will then restrict input so that it matches the mask. It will also format the input as the user types. For instance, the above mask for phone specifies a mask of (999) 000-0000. So when you enter the TextBox, your input is formatted to match that mask as you type.

The widget also benefits from Kendo UI's right-to-left support, accessibility, globalization and tight integration with the MVVM framework.

Check out the MaskedTextBox Demo

Sortable

This is a widget I have been pestering people about for almost 2 1/2 years now. That's why I'm PUMPED to see a sortable in this release of Kendo UI Web.

Sortables allow you to rearrange the items in a list, drag items between two lists, or create drag-and-drop style panels. Simple lists that can be re-ordered with drag and drop are now trivial to create.

<div id="items">
  <div class="sortable">Item 1</div>
  <div class="sortable">Item 2</div>
  <div class="sortable">Item 3</div>
  <div class="sortable">Item 4</div>
  <div class="sortable">Item 5</div>
  <div class="sortable">Item 6</div>
</div>

<script>

  (function(){

    $('#items').kendoSortable();

  }());

</script>

You can disable certain items, define which items can and can't be dropped and customize the placeholder. Drag and drop panels allow you to create very rich interfaces, such as customizable dashboards.

Check out the Sortable Demos

Grid Frozen Columns

I'm sure I will be able to hear the audible squeels of glee when you get to this one. This is our most requested feature of ALL TIME. Wow! We promised that we would do it in Q1 of this year and it. is. done.

To freeze a column, simply specify locked on the column.

var grid = ('#orders').kendoGrid({
  dataSource: {
    transport: {
      read: 'api/orders'
    }
  },
  columns: [ {
      field: 'OrderID',
      title: 'Order ID',
      locked: true,
      width: 120
  }, {
      field: 'ShipCountry',
      title: 'Ship Country',
      width: 200
  }, {
      field: 'ShipCity',
      title: 'Ship City',
      width: 160
  } ]  
})

The Grid now also automatically provides a menu to allow the user to unlock and lock columns.

Check out the Grid Frozen Columns Demo

Grid Support For Real-Time Data

This is another extremely popular request. We have often been asked for formal Socket / SignalR support in the Grid. While you have always been able to build real-time data-driven applications with Kendo UI, the implementation was a bit tricky. We have now factored this support directly into the Kendo UI DataSource, making the implementation much easier with the grid or any other widget.

$("#grid").kendoGrid({
  columns: [
      { field: "UnitPrice" },
      { field: "ProductName" },
      { command: "destroy", width: 100}
  ],            
  dataSource: {
    type: "signalr",
    autoSync: true,
    // Handle the push event to display notifications when push updates arrive
    push: function(e) {
        var notification = $("#notification").data("kendoNotification");
        notification.success(e.type);
    },
    transport: {
        signalr: {
            promise: hubStart,
            hub: hub,
            server: {
                read: "read",
                update: "update",
                destroy: "destroy",
                create: "create"
            },
            client: {
                read: "read",
                update: "update",
                destroy: "destroy",
                create: "create"
            }
        }
    }
  }
});

There is a new DataSource type property that you set to SignalR which allows you to receive notifications as they are pushed to you. A new signalr transport is where the hub and server/client transports are specified.

Of course, you can use straight Web Sockets, Socket.IO or any other Web Socket abstraction that pleases you most. Try out the demos and invite a friend. The data is indeed real-time, so keep it PG. A fun thing to do is to have someone pull it up to check it out and then go back to you computer to troll them by adding messages into the grid. This is technology at it's finest.

Check out the WebSocket Demo Check out the SignalR Demo

Notification

This release is honestly like a list of "Burke's favorite" things. Notifications are another component I use frequently. I like unobtrusive notifications similar to Growl on OS X. This release includes the Kendo UI Notification widget which does exactly that. You can create a notification and programmatically show or hide it.

  var notification = $('').kendoNotification().data('kendoNotification');

  // notifications can be shown with info, error, warning or success styles
  notification.show('OLLO!', 'info');

Notifications can also be stacked, appended to a specific container and positioned absolutely.

Like all Kendo UI widgets, the Notification is easily customizable with full support for Kendo UI templates.

Check out the Notifications Demo

That's not all of what's new in Kendo UI Web, but it's all we have time for here. For now, we're moving on to what's new in Kendo UI Mobile.

Kendo UI Mobile

Kendo UI Mobile has become a staple of mobile web and hybrid applications due to it's comprehensive suite of widgets and focus on performance. Kendo UI Mobile is a complete application framework that has always allowed developers to build applications that looked and felt native. It was the complete mobile development package. While people loved this complete package, you also told us that you wanted to use the mobile components outside of the framework as standalone widgets, or with your favorite JavaScript library.

Pluggable Kendo UI Mobile Widgets

This release introduces the decoupling of Kendo UI Mobile widgets from the Kendo UI Mobile framework. They can now be used in Kendo UI Web applications - or anywhere else for that matter! Want to use a NavBar and an ActionSheet in your web application? No problem. Click the items below for a demo.

While Kendo UI Mobile has had a serverMode for some time, this decoupling allows for greater flexibility in building "static" mobile applications with traditional frameworks like ASP.NET or PHP. It also means that you can now use Kendo UI Mobile widgets with a different JavaScript framework. AngularJS anyone? Leave your comments below if Angular + Kendo UI Mobile sounds as good to you as it does to us.

Android 4.x UX Updates

Kendo UI Mobile has the adaptive rendering system that picks up the look and feel of the device on which it's running. This allows you to get a device specific design without having to maintain two stylesheets or code bases. Operating system styles do change, and we aggressively stay on top of the details. We took the opportunity this quarter to freshen up our Android mobile theme.

Aside from subtle changes that align the theme more with today's latest and greatest versions of Android, we now have an Android Light theme that you can use in place of the existing dark one.

The updating Android theming combined with new "pluggable" widgets opens up a whole new world of application UI possibilities, and we can't wait to see what you build with it.

Kendo UI DataViz

This release of Kendo UI DataViz is HUGE! If you aren't a DataViz person or haven't been watching this area too closely, the DataViz team at Kendo UI has been cranking out some incredibly impressive features with every release. This paticular release might be the most feature packed so far.

Chart Wizard In AppBuilder

You're using AppBuilder to build your mobile apps right? Of course you are. Joining the visual designer in AppBuilder is a brand new Chart Wizard.

You can now create and configure rich charts, graphs, guages, QR and Bar codes and more with the convenience of drag-and-drop using the Visual Designer in AppBuilder. We know that it's very important to productivity - especially in the early stages of an application - to be able to visually design your mobile application. That's why we've added Kend UI DataViz right into the AppBuilder visual designer.

GeoVizualization (RTM)

Remember when we released a beta of our GeoVizualization components last quarter and Derick Bailey proceeded to draw a giant cat? Good times.

The mapping controls are incredibly powerful, allowing you to use a map tiling service to create interactive maps with pins and overlays. The support for GeoJSON enables rich geographic visualizations like Choropleth charts, Heat maps, Cartograms, and as Derick proved - even cartoon cats. The possibilities are endless!

This has been a highly requested feature and we could not be more pleased to announce it's graduation from Beta to RTM with this release of Kendo UI.

Check out the GeoViz demos

Stacked Charts And Log Scale

This release also includes two new enhancements to the bar and area chart types; 100% stacked and log scale.

100% Stacked

This is useful when you want to show percentage data across a range. For instance. The Kendo UI DataViz charts now support this even support grouping for 100% stacks.

Check out 100% Stacked demos

Log Scale

Log scale is when you use intervals corresponding to orders of mangnitude instead of the traditional linear scale. That admitidally sounds confusing, but what it means is that instead of displaying your data on a scale that increases in a linear way (1,2,3) you do it based on exponential changes (10, 100, 1000, 10000). This is very helpful when dealing with data that has a very large value range.

Here is a screenshot from the demos using the Fibnaci Sequence, which rapidly grows over time.

Check out the Log Scale demos

Diagraming Control (Beta)

Interactive diagraming controls have historically existed only in tools such as Visio. In recent years though, we have discovered ways to do this entirely in the web. This opens up all manor of possibilites for those looking to provide interactive flowcharts, organizational diagrams and the like. This release includes the brand spanking new Diagraming Control (Beta).

The diagraming control supports the three most common forms of diagram out of the box. These are the Tree Layout, Forced-Direct Layout and Layered Layout. The diagrams also support zooming within the constrained space to allow you to easily move in and out between high level views and detail.

Check out the Diagram Demos

The diagraming tools are very complex and are proudly wearing a Beta badge for this release. Support is also currently liminted to IE 9+ for the Beta with support for older IE versions coming soon.

What's Next??

You probably feel like a kid on Christmas morning at this point - I know I do. It's overwhelming, so here's what you need to do now.

Check Out The Demos

Make sure you checkout all of the demos in the Web, Mobile and DataViz secions. Look for that nifty "new" tag to know what's so fresh and so clean.

Use The New Tools

Install the Kendo UI Chrome Inspector, Grab the Angular Extensions and head over to the Kendo UI ScratchPad to get started building without further delay.

Download The Goods

Get it while it's hot! And today my friends, it is on fire. Download the latest version of Kendo UI. it's Powerful, extensible and open. This release changes everything really. We can't wait to see what you build with it.