<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>
$("#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: "300"
}).data("kendoExtBorderLayout");