RootPane
configurationDefines the root pane configuration.
rootPane
Object<div style="height:500px; width:1000px">
<div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
rootPane: {
type: "split",
panes: [{
type: "split",
panes: [{
type: "content",
title: "Pane 1",
content: "Split Pane 1",
size: "40%"
}, {
type: "tab",
panes: [{
type: "content",
title: "Tab 1",
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
},
{
type: "content",
title: "Tab 2",
content: "Commodi suscipit porro optio veritatis obcaecati nostrum molestias dolor maxime!"
},
{
type: "content",
title: "Tab 3",
content: "Molestias ducimus placeat quia possimus esse atque odio, a recusandae iste exercitationem"
}],
size: "60%"
}]
}, {
type: "content",
header: "Bottom Tab",
content: "Bottom content",
size: "50%"
}, {
type: "content",
title: "Unpinned",
content: "Some unpinned content",
unpinnable: {
unpinned: true
}
}]
}
});
</script>rootPane.id
StringDefines the id of the root pane
<div style="height:500px; width:1000px">
<div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
rootPane: {
type: "split",
id: "rootPaneId",
panes: [{
type: "content",
title: "Pane 1",
content: "Split Pane 1",
},{
type: "content",
title: "Pane 2",
content: "Split Pane 2",
}]
}
});
</script>rootPane.orientation
StringDefines the orientation of the split pane. Available options are horizontal or vertical.
Default: "horizontal"
<div style="height:500px; width:1000px">
<div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
rootPane: {
type: "split",
orientation: "vertical",
panes: [{
type: "content",
title: "Pane 1",
content: "Split Pane 1",
},{
type: "content",
title: "Pane 2",
content: "Split Pane 2",
}]
}
});
</script>rootPane.panes
ArrayAn array of pane definitions.
<div style="height:500px; width:1000px">
<div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
rootPane: {
type: "split",
panes: [{
type: "content",
title: "First Pane",
content: "Content of the first pane"
}, {
type: "content",
title: "Second Pane",
content: "Content of the second pane"
}]
}
});
</script>rootPane.type
StringDefines the id of the root pane. Available options are tab or split.
Default: "split"
<div style="height:500px; width:1000px">
<div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
rootPane: {
type: "tab",
panes: [{
type: "content",
header: "Pane 1",
content: "Pane content"
}, {
type: "content",
header: "Pane 2",
content: "Secpnd Pane content"
}, {
type: "content",
title: "Pane 3",
content: "Third Pane content"
}]
}
});
</script>Related Members
- rootPane.panes - An array of pane definitions.
- rootPane.panes.dockable - Specifies if the pane can be docked and allow inner docking of other panes. Accepts boolean or object. Available only for panes of type content.
- rootPane.panes.unpinnable - Specifies if the pane can be pinned/unpinnned. Available only for panes of type content.