Kendo UI Extended API: BorderLayout Widget

This website is no longer actively supported

Written by John DeVight on 19 Mar 2013 14:21

Download found at kendoui-extended-api on GitHub in the examples folder.

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:

<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./styles/kendoext/kendo.ext.css" rel="stylesheet" />

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:

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="./scripts/kendo.web.ext.js"></script>

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:

<div id="exampleBorderLayout" style="width:600px;">
    <div id="exampleBorderLayoutNorth">
        North Pane
    </div>
 
    <div id="exampleBorderLayoutEast">
        East Pane
    </div>
 
    <div id="exampleBorderLayoutSouth">
        South Pane
    </div>
 
    <div id="exampleBorderLayoutWest">
        West Pane
    </div>
 
    <div id="exampleBorderLayoutCenter">
        Center Pane
    </div>
</div>

Creating an Instance of the Kendo.ui.ExtBorderLayout Widget

To create an instance of the Kendo.ui.ExtBorderLayout, select the "container" div element using jQuery and call the kendoExtBorderLayout function like this:

$("#exampleBorderLayout").kendoExtBorderLayout({
    /* list of options defined here */
});

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:
  1. north
  2. south
  3. east
  4. west
  5. 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:

$("#exampleBorderLayout").kendoExtBorderLayout({
    items: [
    {
        title: "North",
        region: "north",
        content: "#exampleBorderLayoutNorth",
        collapsible: true,
        size: "75px"
    }, {
        title: "South",
        region: "south",
        content: "#exampleBorderLayoutSouth",
        collapsible: true,
        size: "75px"
    }, {
        title: "West",
        region: "west",
        content: "#exampleBorderLayoutWest",
        collapsible: true,
        size: "150px"
    }, {
        title: "East",
        region: "east",
        content: "#exampleBorderLayoutEast",
        collapsible: true,
        size: "100px"
    }, {
        region: "center",
        content: "#exampleBorderLayoutCenter"
    }],
    height: "300px"
});

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.

Here is the HTML:

<div id="exampleBorderLayout" style="width:600px;">
    <div id="exampleBorderLayoutNorth">
        North Pane
    </div>
 
    <div id="exampleBorderLayoutEast">
        East Pane
    </div>
 
    <div id="exampleBorderLayoutWest">
        West Pane
    </div>
 
    <div id="exampleBorderLayoutCenter">
        Center Pane
    </div>
</div>

Here is the JavaScript:

$("#exampleBorderLayout").kendoExtBorderLayout({
    items: [
    {
        region: "north",
        content: "#exampleBorderLayoutNorth",
        size: "30px"
    }, {
        title: "West",
        region: "west",
        content: "#exampleBorderLayoutWest",
        collapsible: true,
        size: "150px"
    }, {
        title: "East",
        region: "east",
        content: "#exampleBorderLayoutEast",
        collapsible: true,
        size: "100px"
    }, {
        region: "center",
        content: "#exampleBorderLayoutCenter"
    }],
    height: "300px"
});

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.

References

• kendoui-extended-api on GitHub
• ExtJS BorderLayout
• Kendo.ui.Splitter Documentation

Related Articles

• Kendo UI Extended API: DropDownTreeView Widget
• Kendo UI Extended API: DropDownGrid Widget
• Kendo UI Extended API: MessageBox Dialogs

---