HTML Code
Taken from /Partial/BorderLayout.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>
        
    
JavaScript Code
Taken from /Scripts/KendoUiExt.BorderLayout.js
        
$("#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");