Kendo UI for jQuery DockManager Overview
The Dock Manager is a UI component that replicates the docks, along with their behaviors. It gives you the ability to have full control over the layout of your application through panes. This allows end users to alter the existing layout by pinning, resizing, moving, maximizing and hiding panes.
The DockManager is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Configuration
The following example demonstrates how to define the DockManager.
It is mandatory to define a root pane that will contain all other panes.
<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>
Functionality and Features
- [Docking Panes(/kendo-ui/controls/dockmanager/dock-types)—You can dock panes globally or within other inner panes.
- Pane Types—Use different pane types depending on the hierarchical structure you want to achieve.