Pane Types

The Telerik UI for ASP.NET MVC DockManager component exposes the ability to configure different pane types. The following types are as follows.

• Tab—panes of tab type will group panes in a tab strip way, similar to the TabStrip component, users can navigate through panes via tabs in the header.
• Split— with split panes, you are able to group panes in a Splitter fashion, by splitting the container pane either horizontally or vertically.
• Content— with content panes, you have full control on explicitly specifying arbitrary content that will be rendered for a given pane as per your requirements.

The root pane can either be of type Split or Tab.

The following example illustrates configure the pane types.

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");
                    });
                });
            });
        })
    )

See Also

• Server-Side API