ASP.NET MVC DockManager Overview
The DockManager is part of Telerik UI for ASP.NET MVC, 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.
The Telerik UI DockManager HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI DockManager widget.
The DockManager 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 and moving panes.
Initializing the DockManager
The following example demonstrates how to define the DockManager.
@(Html.Kendo().DockManager()
.Name("dockmanager")
.RootPane(root =>
{
root.Id("root")
.Panes(panes => {
panes.Add().Type(PaneType.Split).Panes(top => {
top.Add().Id("tools")
.Type(PaneType.Content)
.Title("Tools")
.Content("Content");
});
});
})
)
Basic Configuration
The DockManager provides a variety of options for configuring the pane hierarchy. The following example shows how to configure the panes.
It is mandatory to define a root pane that will contain all other panes.
@(Html.Kendo().DockManager()
.Name("dockmanager")
.RootPane(root =>
{
root.Id("root")
.Type(RootPaneType.Split)
.Orientation(DockSplitterOrientation.Vertical)
.Panes(panes => {
panes.Add().Type(PaneType.Split).Size("80%").Orientation(DockSplitterOrientation.Horizontal).Panes(top => {
top.Add().Id("tools").Type(PaneType.Content).Title("Tools").Content("Content").Size("20%");
top.Add().Id("files").Type(PaneType.Tab).Size("40%").Panes(tabs =>
{
tabs.Add().Id("file1").Type(PaneType.Content).Title("File 1").Content("File 1");
tabs.Add().Id("file2").Type(PaneType.Content).Title("File 2").Content("File 2");
tabs.Add().Id("file3").Type(PaneType.Content).Title("File 3").Unpinnable(u=>u.Unpinned(true)).Content("File 3");
});
});
});
})
)
Using a Template
You can set the DockManager pane content through the Content(), ContentHandler() and ContentTemplate() methods. The ContentTemplate() method allos you to use the Template component to define the content of the pane.
@(Html.Kendo().DockManager()
.Name("dockmanager")
.RootPane(root =>
{
root.Id("root")
.Type(RootPaneType.Split)
.Orientation(DockSplitterOrientation.Vertical)
.Panes(panes => {
panes.Add().Type(PaneType.Split).Size("80%").Orientation(DockSplitterOrientation. Horizontal).Panes(top => {
top.Add().Id("tools")
.Type(PaneType.Content)
.Title("Tools")
.ContentTemplate(Html.Kendo().Template()
.AddHtml("<div id='tools-content'>Some Content")
.AddComponent(btn => btn.Button().Name("toolBtn").Content("Tools"))
.AddHtml("</div>")
)
.Size("20%");
});
});
})
)
Functionality and Features
- Docking Panes—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.
- Events—You can explicitly handle a variety of event in order to manipulate the component.