Overview

I use the Kendo UI Splitters in the applications that I develop to separate the navigation from the content. However, I got complaints from the customer about the difficulty in clicking on the little arrow on the splitter to collapse or expand the splitter. I used to work with ExtJS on a previous project, and when I showed the customer the ExtJS BorderLayout, the customer said that is what they wanted. So I created a new Kendo UI widget that derives from Kendo.ui.Widget that contains Kendo UI Splitters.

Adding Kendo UI Web Extended API to Your Application

Adding the StyleSheet

In the kendoui-extended-api GitHub repository, there is a styles folder. Download the folder and add it to your application. In the HTML file, define the reference to the kendo.ext.css. For example:

Adding the JavaScript

In the kendoui-extended-api GitHub repository, there is a js folder. Download the folder and add the kendo.web.ext.js file to your application. In the HTML file, define the reference to the kendo.web.ext.js after the references to the jQuery and Kendo UI JavaScript files. For example:

Implement the BorderLayout with all Regions Defined.

Define the BorderLayout HTML.

The HTML for the BorderLayout involves creating a div element that will be the "container" for the Borderlayout widget. Within the "container" div, a div is defined for each region: north, south, east, west, and center. Here is the HTML:

The BorderLayout takes an array of items. Each item describes the "panel" within the border layout. The "panel" derives from the Kendo.ui.Splitter "panes" object. In addition to the Kendo.ui.Splitter panes attributes, an item also has the following attributes:

title (String): The title for the panel.

region (String): The region where the panel will appear. The options are:

north

south

east

west

center

content (String): The CSS Selector for the div that is the content for the panel.

The BorderLayout also takes an optional congfiguration of height. If the height is defined, the border layout will size to the height passed in. If the height is not passed in, then the border layout will size to the height of the parent.

Here is the JavaScript code to create an instance of the ExtBorderlayout widget using the HTML defined above:

Here are some screenshots of the Borderlayout with all regions defined:

BorderLayout control with all regions defined.BorderLayout control with all regions collapsed.

Implement the BorderLayout with some Regions Defined.

The BorderLayout doesn't need to have all the regions defined. Also, a region doesn't have to be collapsible. In the example application, I define the north, east, west and center regions and the north region isn't collapsible.

BorderLayout control with 3 regions defined and only East and West are collapsable.

Conclusion

The ExtBorderLayout provides similar functionality to the ExtJS BorderLayout. Check out the Kendo UI Extended API and let me know if there are additional capabilities that you think need to be added to the ExtBoderLayout or any of the other Kendo UI Extended API widgets. Also, let me know if there are other widgets you would like to see added.