New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Docking Panes

The Telerik UI for ASP.NET MVC DockManager component exposes the ability to dock panes globally or within other panes.

Dock Types

The following dock types are supported:

  • Global Docking
  • Inner Docking

Global Docking

When the user drags a pane a global docking navigator is always shown. The user has the option to dock the dragged pane to one of the component's edges, thus the dragged pane will become one of the root panes.

Inner Docking

When the user drags a pane and hovers over another pane a dock navigator for the pane is shown. The user can choose to drop a pane on any of the parent's outer edges splitting the parent pane, or dropping it in the middle of the navigator to as a tab of the parent pane.

Control the Docking Behavior

You can explicitly configure the docking behavior for a desired pane by using the Dockable() configuration method. The following example illustrates how to alter the behavior of the docking panes.

    @(Html.Kendo().DockManager()
        .Name("dockmanager")
        .RootPane(root =>
        {
            root.Id("root")
            .Type(RootPaneType.Split)
            .Orientation(DockSplitterOrientation.Vertical)
            .Panes(panes  => {
                panes.Add().Type(PaneType.Split).Panes(top => {
                    top.Add().Id("tools")
                       .Type(PaneType.Content)
                       .Title("Tools")
                       .Dockable(dockable => dockable.InnerDock(false))
                       .Content("Content");

                    top.Add().Id("files")
                        .Type(PaneType.Tab)
                        .Dockable(dockable => dockable.Dock(false))
                        .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");
                        });
                });
            });
        })
    )

See Also

In this article