A powerful, flexible dock manager component for laying out, docking, undocking, pinning, and floating panes of content.
Slots
paneHeaderCloseButton — Custom close button for pane headers
tabHeaderCloseButton — Custom close button for tab headers
closeButton — Alias for pane/tab close button
moreTabsButton — Slot for the "more tabs" button
maximizeButton — Slot for maximize buttons
minimizeButton — Slot for minimize buttons
pinButton — Slot for pin buttons
unpinButton — Slot for unpin buttons
moreOptionsButton — Slot for more-options buttons on tab headers
splitterHandle- — Slot for custom splitter handle

Properties

Section titled "Properties"

activePane

Section titled "activePane"

Determines the active content pane.

 
activePane: IgrContentPane

allowFloatingPanesResize

Section titled "allowFloatingPanesResize"

Whether floating panes can be resized.

 
allowFloatingPanesResize: boolean

allowInnerDock

Section titled "allowInnerDock"

Whether docking inside a pane is allowed.

 
allowInnerDock: boolean

allowMaximize

Section titled "allowMaximize"

Whether maximize action button is displayed for the panes.

 
allowMaximize: boolean

allowRootDock

Section titled "allowRootDock"

Determines whether docking into the root-level pane is allowed.

When set to true (default), panes can be docked directly into the root container. This is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane.

 
allowRootDock: boolean

allowSplitterDock

Section titled "allowSplitterDock"

Whether docking over splitter is allowed

 
allowSplitterDock: boolean

autoScrollConfig

Section titled "autoScrollConfig"

Configuration for edge auto-scrolling behavior during drag & resize operations.

  • edgeThreshold: Distance in pixels from the container's edge that triggers scrolling.
  • scrollSpeed: Number of pixels to scroll per interval (affects scroll rate).
 
autoScrollConfig: IgcScrollConfig

closeBehavior

Section titled "closeBehavior"

Which panes get affected by close operations.

 
closeBehavior: IgrPaneActionBehavior

containedInBoundaries

Section titled "containedInBoundaries"

Whether pane dragging stops when any of the pane's sides goes outside the DockManager’s bounds.

 
containedInBoundaries: boolean

contextMenuPosition

Section titled "contextMenuPosition"

Position to open the context menu.

 
contextMenuPosition: IgcContextMenuPosition

disableKeyboardNavigation

Section titled "disableKeyboardNavigation"

Disables all keyboard navigation within the dock manager.

 
disableKeyboardNavigation: boolean

draggedPane

Section titled "draggedPane"

Determines the pane that is currently dragged.

 
draggedPane: IgrContentPane | IgrSplitPane | IgrTabGroupPane

draggedPaneElement

Section titled "draggedPaneElement" 
draggedPaneElement: HTMLElement

dropPosition

Section titled "dropPosition"

The drop position (pane) when docking.

 
dropPosition: IgrDockManagerPoint

enableDragCursor

Section titled "enableDragCursor"

Enables changing the mouse cursor when hovering over a tab or pane header.

When set to true, the cursor changes from the default to pointer, indicating that the header can be dragged (e.g., to dock or float the pane).

 
enableDragCursor: boolean

isValidDrop

Section titled "isValidDrop"

Whether the last drop/drag target was valid.

 
isValidDrop: boolean

layout

Section titled "layout"

The layout configuration of the Dock Manager.

 
layout: IgrDockManagerLayout

maximizedPane

Section titled "maximizedPane"

Determines the pane that is currently maximized.

 
maximizedPane: IgrContentPane | IgrSplitPane | IgrTabGroupPane
Section titled "navigationPaneMeta"

Metadata for the pane-navigator overlay.

 
navigationPaneMeta: IgcPaneNavigatorMetadata

proximityDock

Section titled "proximityDock"

Determines whether docking indicators are displayed while docking

 
proximityDock: boolean

resourceStrings

Section titled "resourceStrings"

The resource strings of the dock manager.

 
resourceStrings: IgrDockManagerResourceStrings

showHeaderIconOnHover

Section titled "showHeaderIconOnHover"

Which header icons are shown on hover.

 
showHeaderIconOnHover: "all" | "none" | "closeOnly" | "moreOptionsOnly"

showPaneHeaders

Section titled "showPaneHeaders"

Determines when to display the pane headers - always or on hover of the pane.

 
showPaneHeaders: "always" | "onHoverOnly"

unpinBehavior

Section titled "unpinBehavior"

Determines which panes are affected by particular pane action such as closing or unpinning.

 
unpinBehavior: IgrPaneActionBehavior

useFixedSizeOnDock

Section titled "useFixedSizeOnDock"

Specifies which docking orientations should apply the FixedSize sizing mode when panes are dynamically created via docking.

Possible values:

  • "none": Do not apply FixedSize on docking (default behavior).
  • "vertical": Apply FixedSize only when panes are docked vertically.
  • "horizontal": Apply FixedSize only when panes are docked horizontally.
  • "both": Apply FixedSize for both vertical and horizontal orientation.

This setting affects only dynamically created panes via user docking actions. It does not apply to programmatically created panes or layout restorations.

 
useFixedSizeOnDock: "both" | "none" | "vertical" | "horizontal"

Accessors

Section titled "Accessors"

direction

Section titled "direction"

Gets the direction of the Dock Manager.

get direction(): string

Returns string

Methods

Section titled "Methods"

dropPane

Section titled "dropPane" 
dropPane(): Promise<boolean>

Returns Promise<boolean>

focusPane

Section titled "focusPane" 
focusPane(contentId: string): Promise<void>

Parameters

  • contentId: string

Returns Promise<void>

paneFlyoutToggle

Section titled "paneFlyoutToggle"

Emitted when an unpinned pane's flyout state changes (opens or closes).

This event fires when:

  • An unpinned pane is clicked and its flyout opens to display content
  • An unpinned pane's flyout closes (user clicks elsewhere, switches to another unpinned pane, etc.)
  • Switching between unpinned panes (fires twice: close event for old pane, open event for new pane)

This event does NOT fire when:

  • A pane is pinned or unpinned using the pin button (use panePinnedToggle for that)
  • A pane is initially unpinned (only subsequent flyout open/close actions)

Use this event to show/hide auxiliary UI, update summary views, or respond to unpinned pane visibility changes.

paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>

Parameters

  • args: IgcPaneFlyoutEventArgs

Returns CustomEvent<IgcPaneFlyoutEventArgs>

Example

dockManager.addEventListener('paneFlyoutToggle', (event) => {
  const { pane, isOpen } = event.detail;
  if (isOpen) {
    // Unpinned pane opened - show related UI
    summaryPanel.style.display = 'none';
  } else {
    // Unpinned pane closed - hide related UI
    summaryPanel.style.display = 'block';
  }
});

removePane

Section titled "removePane" 
removePane(pane: IgrDockManagerPane): Promise<void>

Parameters

Returns Promise<void>

Events

Section titled "Events"

onActivePaneChanged

Section titled "onActivePaneChanged" 
onActivePaneChanged(args: CustomEvent<IgrActivePaneEventArgs>): void

Parameters

Returns void

onFloatingPaneResizeEnd

Section titled "onFloatingPaneResizeEnd" 
onFloatingPaneResizeEnd(args: CustomEvent<IgrFloatingPaneResizeEventArgs>): void

Parameters

Returns void

onFloatingPaneResizeMove

Section titled "onFloatingPaneResizeMove" 
onFloatingPaneResizeMove(args: CustomEvent<IgrFloatingPaneResizeMoveEventArgs>): void

Parameters

Returns void

onFloatingPaneResizeStart

Section titled "onFloatingPaneResizeStart" 
onFloatingPaneResizeStart(args: CustomEvent<IgrFloatingPaneResizeEventArgs>): void

Parameters

Returns void

onLayoutChange

Section titled "onLayoutChange" 
onLayoutChange(args: CustomEvent<IgcLayoutChangeEventArgs>): void

Parameters

Returns void

onPaneClose

Section titled "onPaneClose" 
onPaneClose(args: CustomEvent<IgrPaneCloseEventArgs>): void

Parameters

Returns void

onPaneDragEnd

Section titled "onPaneDragEnd" 
onPaneDragEnd(args: CustomEvent<IgrPaneDragEndEventArgs>): void

Parameters

Returns void

onPaneDragOver

Section titled "onPaneDragOver" 
onPaneDragOver(args: CustomEvent<IgrPaneDragOverEventArgs>): void

Parameters

Returns void

onPaneDragStart

Section titled "onPaneDragStart" 
onPaneDragStart(args: CustomEvent<IgrPaneDragStartEventArgs>): void

Parameters

Returns void

onPaneFlyoutToggle

Section titled "onPaneFlyoutToggle" 
onPaneFlyoutToggle(args: CustomEvent<IgcPaneFlyoutEventArgs>): void

Parameters

Returns void

onPaneHeaderConnected

Section titled "onPaneHeaderConnected" 
onPaneHeaderConnected(args: CustomEvent<IgrPaneHeaderConnectionEventArgs>): void

Parameters

Returns void

onPaneHeaderDisconnected

Section titled "onPaneHeaderDisconnected" 
onPaneHeaderDisconnected(args: CustomEvent<IgrPaneHeaderConnectionEventArgs>): void

Parameters

Returns void

onPanePinnedToggle

Section titled "onPanePinnedToggle" 
onPanePinnedToggle(args: CustomEvent<IgrPanePinnedEventArgs>): void

Parameters

Returns void

onPaneScroll

Section titled "onPaneScroll" 
onPaneScroll(args: CustomEvent<IgrPaneScrollEventArgs>): void

Parameters

Returns void

onSplitterResizeEnd

Section titled "onSplitterResizeEnd" 
onSplitterResizeEnd(args: CustomEvent<IgrSplitterResizeEventArgs>): void

Parameters

Returns void

onSplitterResizeStart

Section titled "onSplitterResizeStart" 
onSplitterResizeStart(args: CustomEvent<IgrSplitterResizeEventArgs>): void

Parameters

Returns void

onTabHeaderConnected

Section titled "onTabHeaderConnected" 
onTabHeaderConnected(args: CustomEvent<IgrTabHeaderConnectionEventArgs>): void

Parameters

Returns void

onTabHeaderDisconnected

Section titled "onTabHeaderDisconnected" 
onTabHeaderDisconnected(args: CustomEvent<IgrTabHeaderConnectionEventArgs>): void

Parameters

Returns void