The Kendo UI for jQuery DockManager widget exposes the ability to configure different pane types. The following types are as follows.
-
tab—panes of tab type will group panes in a tab strip way, similar to theTabStripcomponent, users can navigate through panes via tabs in the header. -
split— with split panes, you are able to group panes in a Splitter fashion, by splitting the container pane eitherhorizontallyorvertically. -
content— with content panes, you have full control on explicitly specifying arbitrary content that will be rendered for a given pane as per your requirements.
The root pane can either be of type
splitortab.
<div id="dockmanager"></div>
<script>
$(document).ready(function () {
$("#dockmanager").kendoDockManager({
rootPane: {
id: "root",
type: "split",
orientation: "vertical",
panes: [{
type: "split",
panes: [{
type: "content",
title: "Tools",
content: "Some tools.",
size: "20%"
}, {
type: "tab",
panes: [{
type: "content",
title: "File 1",
id: "myFile",
content: "File 1"
}, {
type: "content",
title: "File 2",
content: "File 2"
}, {
type: "content",
title: "File 3",
content: "File 3",
unpinnable: {
unpinned: true
}
}],
size: "40%"
}, {
type: "split",
orientation: "vertical",
title: "container pane",
panes: [{
type: "tab",
panes: [{
type: "content",
title: "Properties",
content: "Properties content"
},
{
type: "content",
title: "History",
content: "History content"
}]
},
{
type: "content",
title: "Layers",
content: "Layers content"
}],
size: "40%"
}],
size: "80%"
}, {
type: "content",
header: "Console",
content: "Console content",
size: "20%"
}]
}
})
});
</script>