Skip to content

Latest commit

 

History

History
204 lines (153 loc) · 9.73 KB

overview.md

File metadata and controls

204 lines (153 loc) · 9.73 KB
title page_title description slug tags published position
Overview
DockManager Overview
Overview of the DockManager for Blazor.
dockmanager-overview
telerik,blazor,dockmanager,overview
true
0

Blazor DockManager Overview

The Blazor DockManager component is a versatile tool that enables users to manage and organize multiple panes within a single container. It supports features like docking, undocking, resizing, and repositioning, offering a flexible and customizable layout.

The DockManager is best suited for desktop-like interfaces and applications designed for larger screens, where users can take full advantage of its advanced layout management capabilities.

Creating Blazor DockManager

  1. Add the TelerikDockManager tag.
  2. Use <DockManagerPanes> to structure the main docked layout.
  3. Within <DockManagerPanes>, add:
    • <DockManagerContentPane> for standalone panes.
    • <DockManagerSplitPane> to create sections with multiple resizable panes.
    • <DockManagerTabGroupPane> to enable tabbed panes.
  4. Define HeaderTemplate tag inside each pane to set the headers text.
  5. Populate the Content tag section of each pane with the desired UI elements.
  6. Optionally, add <DockManagerFloatingPanes> to create panes that can float outside the main dock layout.

caption Telerik Blazor DockManager

<TelerikDockManager Height="90vh">
    <DockManagerPanes>

        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical"
                              Size="40%">
            <Panes>

                <DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
                    <Content>
                        First Content Pane in Split configuration
                    </Content>
                </DockManagerContentPane>

                <DockManagerContentPane HeaderText="Pane 1.2">
                    <Content>
                        Second Content Pane in Split configuration
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerSplitPane>

        <DockManagerTabGroupPane>
            <Panes>

                <DockManagerContentPane HeaderText="Tab 2.1">
                    <Content>
                        First Tab Content
                    </Content>
                </DockManagerContentPane>

                <DockManagerContentPane HeaderText="Tab 2.2">
                    <Content>
                        Second Tab Content
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerTabGroupPane>
    </DockManagerPanes>

    <DockManagerFloatingPanes>
        <DockManagerSplitPane>
            <Panes>

                <DockManagerContentPane HeaderText="Floating Pane">
                    <Content>
                        Floating Pane Content
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerSplitPane>
    </DockManagerFloatingPanes>
</TelerikDockManager>

State

The Dock Manager allows getting and setting its state. The DockManager state contains information about the pane hierarchy, floating panes, current pane settings, and the DockManager configuration, such as its orientation.

Docking Types

The DockManager exposes the ability to dock globally or within other panes. Read more about the available DockManager dock types...

Pane Types

The DockManager exposes the ability to configure different pane types. Read more about the DockManager pane types...

Events

The Dock Manager fires events when the user changes the panes layout. This allows custom logic execution, refreshing of nested components and saving the DockManager state for later restore.

DockManager Parameters

The following table lists the Dock Manager parameters. Also check the DockManager API Reference for a full list of all properties, methods and events.

@template

Parameter Type and Default Value Description
Class string The custom CSS class of the <div class="k-dockmanager"> element. Use it to override theme styles.
Height string The Dock Manager height. If not set, the component will expand automatically to cover the available space.
Orientation DockManagerPaneOrientation enum
(Vertical)		 Determines the orientation of the root splitter.
Width string The Dock Manager width. If not set, the component will expand horizontally to fill its parent.

DockManagerContentPane Parameters

Parameter Type and Default Value Description
AllowFloat bool
(false)		 Determines whether the pane can be dragged from the dock manager layout to create a new floating pane.
AllowInnerDock bool
(true)		 Restricts from performing inner docking within the specified pane. Inner docking is an operation that allows dropping one pane over another, creating a TabGroupPane (TabStrip).
Class string The custom CSS class of the <div class="k-pane-scrollable"> element. Use it to override theme styles.
Closeable bool
(false)		 Determines whether the pane can be closed.
Dockable bool
(false)		 Specifies whether the pane allows other panes to be docked to or over it. This determines if the end user can drop other panes over it or next to it, creating a DockManagerSplitPane (Splitter) or a DockManagerTabGroupPane (TabStrip).
HeaderText string The pane title, displayed in the pane header and as the button text in the DockManager toolbar when the pane is unpinned.
Id string
(Guid)		 The id of the pane.
Maximizable bool
(false)		 Determines whether the pane can be maximized.
Size string Determines the size of the splitter pane.
Unpinnable bool
(false)		 Determines whether the pane can be unpinned.
Unpinned bool
(true)		 Determines whether the pane is unpinned.
Visible bool
(true)		 Determines whether the tab/pane is rendered.

DockManagerSplitPane Parameters

Parameter Type and Default Value Description
AllowEmpty bool
(false)		 Determines whether a splitter pane is shown as empty when a child pane is removed (dragged out, closed, etc.). If set to false, the splitter is re-rendered without the removed child pane.
Class string The custom CSS class of the <div class="k-dock-manager-splitter"> element. Use it to override theme styles.
Id string
(Guid)		 The id of the pane.
Orientation DockManagerPaneOrientation enum
(Vertical)		 Determines the orientation of the rendered splitter.
Size string Determines the size of the splitter pane.
Visible bool
(true)		 Determines whether the tab/pane is rendered.

DockManagerSplitPane Parameters (only when defined as a floating pane)

Parameter Type and Default Value Description
FloatingHeight string The height of the rendered window.
FloatingLeft string The CSS left value of the rendered window, relative to the dock manager element (k-dockmanager)
FloatingResizable bool
(true)		 Determines whether the rendered window is resizable.
FloatingTop string The CSS top value of the rendered window, relative to the dock manager element (k-dockmanager)
FloatingWidth string The width of the rendered window.

DockManagerTabGroupPane Parameters

Parameter Type and Default Value Description
AllowEmpty bool
(false)		 Determines whether an empty space is left when all tabs are removed (unpinned, closed, etc.), allowing you to drop content panes and create a new tab.
Id string
(Guid)		 The id of the pane.
SelectedPaneId int The id of the initially selected tab pane.
Size string Determines the size of the splitter pane.
Visible bool
(true)		 Determines whether the tab/pane is rendered.

DockManager Reference

Use the component reference to execute methods and get or set the DockManager state.

Method Description
GetState Returns the current state of the Dock Manager as a DockManagerState object.
Refresh Use the method to programmatically re-render the component.
SetState Applies the provided DockManagerState argument as a new state of the Dock Manager. 
<TelerikDockManager @ref="@DockManagerRef" />

<TelerikButton OnClick="@GetDockManagerState">Get DockManager State</TelerikButton>

@code{
    private TelerikDockManager? DockManagerRef { get; set; }

    private void GetDockManagerState()
    {
        var dockState = DockManagerRef?.GetState();
    }
}

Next Steps

  • Explore the DockManager Docking Types
  • Explore the DockManager Pane Types
  • Configure the DockManager State
  • Handle the DockManager Events

See Also