Available in the Full Version
Dock Manager - Overview
The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
For further information on the usage of the Dock Manager component, you can check out
this topic
Code View
Copy to Clipboard
if (!window.moduleLoaded) {
$("#dockManager").hide();
$("#error").show();
}
else {
$("#error").hide();
document.getElementById('dockManager').layout = {
rootPane: {
type: "splitPane",
orientation: "horizontal",
panes: [
{
type: "splitPane",
orientation: "vertical",
panes: [
{
type: "contentPane",
contentId: "content1",
header: "Content Pane 1"
},
{
type: "contentPane",
contentId: "content2",
header: "Unpinned Pane 1",
isPinned: false
}
]
},
{
type: "splitPane",
orientation: "vertical",
size: 200,
panes: [
{
type: "documentHost",
size: 200,
rootPane: {
type: "splitPane",
orientation: "horizontal",
panes: [
{
type: "tabGroupPane",
panes: [
{
type: "contentPane",
header: "Document 1",
contentId: "content3"
},
{
type: "contentPane",
header: "Document 2",
contentId: "content4"
}
]
}
]
}
},
{
type: "contentPane",
contentId: "content5",
header: "Unpinned Pane 2",
isPinned: false
}
]
},
{
type: "splitPane",
orientation: "vertical",
panes: [
{
type: "tabGroupPane",
size: 200,
panes: [
{
type: "contentPane",
contentId: "content6",
header: "Tab 1"
},
{
type: "contentPane",
contentId: "content7",
header: "Tab 2"
}
]
},
{
type: "contentPane",
contentId: "content8",
header: "Content Pane 2"
}
]
}
]
},
floatingPanes: [
{
type: "splitPane",
orientation: "horizontal",
floatingHeight: 150,
floatingWidth: 250,
floatingLocation: { x: 300, y: 200 },
panes: [
{
type: "contentPane",
contentId: "content9",
header: "Floating Pane"
}
]
}
]
};
}
<igc-dockmanager id="dockManager">
<div slot="content1" class="dockManagerContent">Content 1</div>
<div slot="content2" class="dockManagerContent">Content 2</div>
<div slot="content3" class="dockManagerContent">Content 3</div>
<div slot="content4" class="dockManagerContent">Content 4</div>
<div slot="content5" class="dockManagerContent">Content 5</div>
<div slot="content6" class="dockManagerContent">Content 6</div>
<div slot="content7" class="dockManagerContent">Content 7</div>
<div slot="content8" class="dockManagerContent">Content 8</div>
<div slot="content9" class="dockManagerContent">Content 9</div>
</igc-dockmanager>
<div class="ui-html5-non-html5 ui-widget ui-igplayer" id="error" style="width: 100%; height:320px;">
<div class="ui-html5-non-html5-supported-message ui-helper-clearfix" style="OVERFLOW: auto" data-not-supported-browser="true">
<div class="ui-html5-non-html5-text">The current browser does not support ES6. <br>Try upgrading to any of the following versions:</div>
<ul class="ui-html5-browsers-list">
<li class="ui-corner-all"><a class="ui-html5-chrome-icon" href="http://www.google.com/chrome" target="_blank">Google Chrome V 51+</a></li>
<li class="ui-corner-all"><a class="ui-html5-firefox-icon" href="http://www.mozilla.com/" target="_blank">Mozilla Firefox V 54+</a></li>
<li class="ui-corner-all"><a class="ui-html5-Opera-icon" href="http://www.opera.com/download/" target="_blank">Opera V 38+</a></li>
<li class="ui-corner-all"><a class="ui-html5-safari-icon" href="http://www.apple.com/safari/download/" target="_blank">Apple Safari V 10+</a></li>
<li class="ui-corner-all"><a class="ui-html5-ie-icon" href="https://www.microsoft.com/en-us/edge" target="_blank">Microsoft Edge V 14+</a></li>
</ul>
</div>
</div>
.dockManagerContent {
padding: 0.5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script type="module" >
import { defineCustomElements } from 'http://cdn-na.infragistics.com/igniteui/2024.1/latest/dockmanager/loader/index.mjs';
defineCustomElements();
window.moduleLoaded = true;
</script>
<style>
.dockManagerContent {
padding: 0.5rem;
}
</style>
</head>
<body style="height: 600px;">
<igc-dockmanager id="dockManager">
<div slot="content1" class="dockManagerContent">Content 1</div>
<div slot="content2" class="dockManagerContent">Content 2</div>
<div slot="content3" class="dockManagerContent">Content 3</div>
<div slot="content4" class="dockManagerContent">Content 4</div>
<div slot="content5" class="dockManagerContent">Content 5</div>
<div slot="content6" class="dockManagerContent">Content 6</div>
<div slot="content7" class="dockManagerContent">Content 7</div>
<div slot="content8" class="dockManagerContent">Content 8</div>
<div slot="content9" class="dockManagerContent">Content 9</div>
</igc-dockmanager>
<div class="ui-html5-non-html5 ui-widget ui-igplayer" id="error" style="width: 100%; height:320px;">
<div class="ui-html5-non-html5-supported-message ui-helper-clearfix" style="OVERFLOW: auto" data-not-supported-browser="true">
<div class="ui-html5-non-html5-text">The current browser does not support ES6. <br>Try upgrading to any of the following versions:</div>
<ul class="ui-html5-browsers-list">
<li class="ui-corner-all"><a class="ui-html5-chrome-icon" href="http://www.google.com/chrome" target="_blank">Google Chrome V 51+</a></li>
<li class="ui-corner-all"><a class="ui-html5-firefox-icon" href="http://www.mozilla.com/" target="_blank">Mozilla Firefox V 54+</a></li>
<li class="ui-corner-all"><a class="ui-html5-Opera-icon" href="http://www.opera.com/download/" target="_blank">Opera V 38+</a></li>
<li class="ui-corner-all"><a class="ui-html5-safari-icon" href="http://www.apple.com/safari/download/" target="_blank">Apple Safari V 10+</a></li>
<li class="ui-corner-all"><a class="ui-html5-ie-icon" href="https://www.microsoft.com/en-us/edge" target="_blank">Microsoft Edge V 14+</a></li>
</ul>
</div>
</div>
<script>
$(function () {
if (!window.moduleLoaded) {
$("#dockManager").hide();
$("#error").show();
}
else {
$("#error").hide();
document.getElementById('dockManager').layout = {
rootPane: {
type: "splitPane",
orientation: "horizontal",
panes: [
{
type: "splitPane",
orientation: "vertical",
panes: [
{
type: "contentPane",
contentId: "content1",
header: "Content Pane 1"
},
{
type: "contentPane",
contentId: "content2",
header: "Unpinned Pane 1",
isPinned: false
}
]
},
{
type: "splitPane",
orientation: "vertical",
size: 200,
panes: [
{
type: "documentHost",
size: 200,
rootPane: {
type: "splitPane",
orientation: "horizontal",
panes: [
{
type: "tabGroupPane",
panes: [
{
type: "contentPane",
header: "Document 1",
contentId: "content3"
},
{
type: "contentPane",
header: "Document 2",
contentId: "content4"
}
]
}
]
}
},
{
type: "contentPane",
contentId: "content5",
header: "Unpinned Pane 2",
isPinned: false
}
]
},
{
type: "splitPane",
orientation: "vertical",
panes: [
{
type: "tabGroupPane",
size: 200,
panes: [
{
type: "contentPane",
contentId: "content6",
header: "Tab 1"
},
{
type: "contentPane",
contentId: "content7",
header: "Tab 2"
}
]
},
{
type: "contentPane",
contentId: "content8",
header: "Content Pane 2"
}
]
}
]
},
floatingPanes: [
{
type: "splitPane",
orientation: "horizontal",
floatingHeight: 150,
floatingWidth: 250,
floatingLocation: { x: 300, y: 200 },
panes: [
{
type: "contentPane",
contentId: "content9",
header: "Floating Pane"
}
]
}
]
};
}
});
</script>
</body>
</html>