New to Telerik UI for ASP.NET MVCStart a free 30-day trial

ASP.NET MVC DockManager Overview

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.

Razor
    @(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.

Razor
    @(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.

Razor
    @(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](% slug events_dockmanager_aspnetcore%)—You can explicitly handle a variety of event in order to manipulate the component.

Next Steps

See Also