DockingLayout Properties
| Name | Type | Default | Description |
|---|---|---|---|
| AutoLoadState | bool | false | Controls whether the automatic loading of a saved layout state is enabled or disabled. Note: For automatic loading to function, a layout state must have been previously saved; if no saved state exists, loading cannot occur. |
| AutoSaveState | bool | false | Controls whether the automatic saving and restoring of the element’s state is enabled. Note: To successfully save and restore the state, the element must have a unique id attribute assigned. |
| Disabled | bool | false | Controls whether the element is active or inactive. When enabled, users can interact with the element; when disabled, the element is rendered non-interactive and may appear visually distinct to indicate its inactive state. |
| Draggable | bool | true | If set to false, this option disables the ability for users to reposition DockingLayout items using drag-and-drop in the UI. When disabled, items can only be moved or rearranged programmatically using the provided API methods; manual dragging by end-users will not be possible. |
| Floatable | bool | true | When set to false, this option disables item floating within the DockingLayout. If a window is dragged in an attempt to float it, the window will automatically return to its original docked position, rather than being allowed to float outside the layout. Note that any LayoutPanel items which were already floating before this setting was applied will remain unaffected and will not be forced back into the docking structure. |
| HideSplitterBars | bool | false | Conceals all splitter bars within the specified element, preventing them from being visible or interactable by the user. |
| Layout | object | N/A | Defines the Element Structure' This property specifies the overall structure and hierarchy of the element. It accepts an array of objects, where each object defines a specific item within the element—along with its settings, type, and relationship to other items. The structure enables you to organize complex layouts such as split containers, tabbed panels, and tab items. 'Item Object Types' Every object in the array must include a 'type' attribute, which determines its behavior and role within the layout. The following three types of objects are supported: --- ### 1. 'LayoutGroup' Represents a splitter or a group of layout panels. Use this type to create containers that organize multiple DockingLayout items (such as panels) in either horizontal or vertical arrangements. 'Properties:' - 'type': '"LayoutGroup"' (required) - 'orientation': 'string' – Specifies the orientation of the splitter, either ''horizontal'' or ''vertical''. - 'size': 'string | number' – Sets the size of the splitter group. - 'items': 'Array - 'resizeMode': 'string' – Specifies the resizing behavior. Valid values: ''none'', ''adjacent'', ''end'', ''proportional''. - 'resizeStep': 'number' – Determines the increment step used when resizing by splitter. - 'liveResize': 'boolean' – If true, resizing happens live as the splitter is dragged. --- ### 2. 'LayoutPanel' Represents a tabbed container (TabsWindow) within the DockingLayout. Each 'LayoutPanel' can hold one or more 'LayoutPanelItem' objects (tab items). 'Properties:' - 'type': '"LayoutPanel"' (required) - 'id': 'string' – Unique identifier for the LayoutPanel. - 'autoHide': 'boolean' – If true, enables auto-hide for the panel. - 'autoHidePosition': 'string' – If 'autoHide' is enabled, specifies the hide position: ''top'', ''bottom'', ''left'', or ''right''. - 'dropPosition': 'string' – Determines where new items can be dropped when dragged. Options include: ''top'', ''bottom'', ''left'', ''right'', ''center'', ''header'', ''layout-top'', ''layout-bottom'', ''layout-left'', ''layout-right''. Positions with the 'layout-' prefix specifically refer to LayoutPanelItems within the panel. - 'label': 'string' – The visible label of the panel window. - 'tabPosition': 'string' – Controls the position of the tab labels within the panel. - 'layout': 'string | object' – Assigns the owning DockingLayout. Accepts either the string ID or a reference to the DockingLayout instance. - 'headerButtons': 'Array - 'tabCloseButtons': 'boolean' – Enables or disables a close button on each tab label within the panel. - 'tabOverflow': 'string' – Specifies how tab label overflow is handled (mirrors the SmartTabs 'overflow' property). - 'selectionMode': 'string' – Sets the tab selection mode (mirrors the SmartTabs 'selectionMode'). - 'tabResize': 'boolean' – Allows resizing of tab labels (mirrors the SmartTabs 'resize' property). - 'locked': 'boolean' – Locks the panel size, preventing resizing. - 'max': 'number' – Sets the maximum allowed size for the panel. - 'min': 'number' – Sets the minimum allowed size for the panel. - 'size': 'string | number' – Defines the current size of the layout panel. - 'items': 'Array --- ### 3. 'LayoutPanelItem' Represents a single tab within a LayoutPanel (also known as a TabItem). 'Properties:' - 'type': '"LayoutPanelItem"' (required) - 'id': 'string' – Unique identifier for this tab. - 'label': 'string' – The text label shown on the tab. - 'content': 'any' – The actual content of the tab. Can be any supported node, data, or HTML. - 'selected': 'boolean' – Indicates if this tab should be selected by default. By default, the first item is selected automatically. - 'draggable': 'boolean' – If false, disables drag-and-drop for the tab item. --- 'Summary' Use this property to configure complex, nested layouts comprising splitters (LayoutGroup), tabbed panels (LayoutPanel), and individual tab items (LayoutPanelItem). Each configuration object must specify a 'type', and each type includes a distinct set of properties to control behavior, appearance, and interaction within the layout hierarchy. |
| LiveResize | bool | false | When this option is enabled, resizing occurs in real time as the user drags the splitter, allowing them to see the panels adjust immediately. By default, this feature is disabled; instead, a highlighted guide or outline appears during the drag action, and the actual panels are resized only after the user releases the mouse button. |
| UnlockKey | string | "" | Gets or sets the 'unlockKey', a unique code required to activate and access the full features of the product. |
| Locale | string | "en" | Specifies or retrieves the current language setting. This property determines which set of localized messages from the messages property should be used or displayed. Assigning a language code (e.g., 'en' for English, 'fr' for French) allows the component to present its interface and messages in the corresponding language. |
| Messages | object | N/A | Manages an object containing all the text strings displayed by the widget, allowing these strings to be easily customized for different languages. This property works together with the locale property to support localization and internationalization, ensuring that users see the appropriate translations based on their selected language. When set, it updates the widget’s UI with the provided localized strings; when accessed, it returns the current set of localization strings in use. |
| Readonly | bool | false | When the element has the "readonly" attribute, users can view its content but cannot modify or interact with it. However, the element’s value can still be copied or selected, and it may receive focus via keyboard navigation, but any attempt to change its value will not be permitted. |
| RightToLeft | bool | false | Gets or sets a value that specifies whether the element's alignment supports right-to-left (RTL) languages, adjusting the text and layout direction for users of locales such as Arabic or Hebrew. This ensures that the element properly accommodates languages that are read and displayed from right to left. |
| ResizeStep | int | 5 | Specifies the incremental value by which the size is increased or decreased during resizing operations. This determines how much the element's dimensions change with each resize step. |
| SnapMode | DockingLayoutSnapMode | DockingLayoutSnapMode.Advanced | Specifies the snap mode for drag-and-drop operations within the layout. There are two available modes:
The highlighter or feedback overlay automatically appears as soon as a drag operation is initiated, visually guiding the user to all valid drop targets and enhancing the drag-and-drop experience. |
| Theme | string | "" | Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance—including colors, fonts, and styles—ensuring a consistent look and feel that matches the application's design guidelines. |
| Unfocusable | bool | false | If set to true, the element will be excluded from the tab order and cannot receive focus via keyboard navigation or mouse interaction. |
DockingLayout Methods
| Name | Type | Arguments | Description |
|---|---|---|---|
| AutoHideBottom | void | object node | Creates a "smart-tabs-window" node as a child of the layout, configured to be auto-hidden by positioning it at the bottom of the container. This setup places the tab window along the bottom edge of the layout, where its content remains concealed by default. The content only becomes visible when the user clicks or selects one of the tab's labels, providing an unobtrusive way to access additional information or tools within the interface.Args: object node - The "smart-tabs-window" or "smart-tab-item" node to append |
| AutoHideLeft | void | object node | Creates a "smart-tabs-window" node as a child element within the Layout, configuring it to be auto-hidden and docked to the left side of the layout. This means the tabs window will appear collapsed along the left edge of the application interface, keeping its content hidden by default. The content inside the "smart-tabs-window" will only be displayed when the user clicks or selects one of its tab labels, providing a space-saving and user-friendly navigation option.Args: object node - The "smart-tabs-window" or "smart-tab-item" node to append |
| AutoHideRight | void | object node | Creates a "smart-tabs-window" node as a child of the Layout and configures it to be auto-hidden by docking it to the right side of the layout. With this setting, the tabbed window will appear collapsed along the right edge of the layout. Its contents will remain hidden until the user clicks or hovers over one of its tab labels, causing the window to slide out and reveal its content. This behavior helps conserve space in the layout while still providing quick access to the window's features when needed.Args: object node - The "smart-tabs-window" or "smart-tab-item" node to append |
| AutoHideTop | void | object node | Creates a "smart-tabs-window" node as a child of the Layout, configured to be auto-hidden and positioned at the top area of the layout. This setting causes the tabs window to appear as a hidden panel or tab strip along the top edge of the layout. The content of the panel remains concealed until the user selects one of its tab labels, at which point the associated content is displayed. This behavior is commonly used to maximize workspace while allowing users to quickly access tools or information as needed.Args: object node - The "smart-tabs-window" or "smart-tab-item" node to append |
| ClearState | void | N/A | Removes all previously stored DockingLayout state information from localStorage, effectively resetting any cached layouts or user customizations and restoring the layout to its default configuration. |
| Dock | dynamic | object node | This method restores an auto-hidden item to its default (docked) state and allows you to re-insert it at a specified position within the layout. Additionally, you can use this method to insert new items directly into the DockingLayout. <br/>"Note:" All items inserted with this method become top-level elements in the DockingLayout hierarchy.Args: object node - An autohidden "smart-tabs-window" item instance or a new "smart-tabs-window" instance. |
| Dock | dynamic | string node | This method restores an auto-hidden item to its default (docked) state and allows you to re-insert it at a specified position within the layout. Additionally, you can use this method to insert new items directly into the DockingLayout. <br/>"Note:" All items inserted with this method become top-level elements in the DockingLayout hierarchy.Args: string node - An autohidden "smart-tabs-window" item instance or a new "smart-tabs-window" instance. |
| Dock | dynamic | int node | This method restores an auto-hidden item to its default (docked) state and allows you to re-insert it at a specified position within the layout. Additionally, you can use this method to insert new items directly into the DockingLayout. <br/>"Note:" All items inserted with this method become top-level elements in the DockingLayout hierarchy.Args: int node - An autohidden "smart-tabs-window" item instance or a new "smart-tabs-window" instance. |
| GetAutoHideItems | IEnumerable<object> | string orientation | Returns an array containing all items that have been automatically hidden by the system or application logic. Each element in the array represents an item that meets the auto-hide criteria, allowing developers to programmatically access or process these hidden items as needed.Args: string orientation - Determines which auto hidden items to return ( vertical or horizontal ). If not set the method will return all autohidden items. Possible values: 'vertical', 'horizontal'. |
| GetAutoHideItems | IEnumerable<object> | N/A | Returns an array containing all items that have been automatically hidden by the system or application logic. Each element in the array represents an item that meets the auto-hide criteria, allowing developers to programmatically access or process these hidden items as needed. |
| GetIndex | int | object node | Returns the zero-based index of the first occurrence of the specified target item within the collection. If the target item is not found, the method returns -1.Args: object node - Returns the index of the target item. |
| GetItem | object | object id | Returns a layout item from the docking layout based on its Id.Args: string id - The id of the item |
| GetItemGroupElement | object | object item | Returns the parent Splitter component containing the specified Layout item. If the Layout item is nested within one or more Splitter containers, this method retrieves the immediate Splitter parent that manages the Layout item. If the Layout item is not inside a Splitter, the method returns null.Args: object item - DockingLayout item |
| GetItemGroupElement | object | N/A | Returns the parent Splitter component containing the specified Layout item. If the Layout item is nested within one or more Splitter containers, this method retrieves the immediate Splitter parent that manages the Layout item. If the Layout item is not inside a Splitter, the method returns null. |
| GetJSONStructure | IEnumerable<object> | N/A | Returns a JSON array of objects, each representing the current structure and state of the element. This array is formatted to be directly compatible with LocalStorage, allowing you to easily save and restore the element's configuration as needed. |
| GetState | IEnumerable<object> | bool noInstances | Returns an array of objects, where each object represents a layout item within the element. Each object contains detailed settings for the layout item—such as its type, properties, and configuration options—as well as information about its position and relationship to other items in the hierarchy. This provides a complete snapshot of the current structural organization and settings of the element.Args: bool noInstances - Determines if the returned array will contain HTML references or not. When saving to localStorage the resulted array should not contain any HTMLElement references. |
| GetState | IEnumerable<object> | N/A | Returns an array of objects, where each object represents a layout item within the element. Each object contains detailed settings for the layout item—such as its type, properties, and configuration options—as well as information about its position and relationship to other items in the hierarchy. This provides a complete snapshot of the current structural organization and settings of the element. |
| InsertAfterItem | void | object index, object item | Inserts a new TabsWindow into the DockingLayout at a position immediately following the target item, as specified by the index provided as the first argument. The new TabsWindow can be created either as a blank instance or from an object supplied as the second argument to the method. This allows for flexible insertion of TabsWindows—either by reusing existing configuration objects or by creating new ones—while precisely controlling their placement within the layout."Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertBeforeItem | void | object index, object item | Inserts a new TabsWindow into the DockingLayout at the specified position. The position is determined by the index provided as the first argument, and the new TabsWindow will be placed immediately before the existing item at that index. The second argument can be either a TabsWindow instance or a plain object representing the TabsWindow's configuration; if an object is provided, a new TabsWindow instance will be created from it. This method ensures that the new TabsWindow is integrated seamlessly into the DockingLayout's existing structure.Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertFloatingWindow | void | object item, object left, object top | Inserts a new `TabsWindow` instance into the application interface. The newly created window appears in floating mode, meaning it is not docked to any edge of the main window and can be freely repositioned by the user. This allows for independent movement and placement on the screen, separate from other docked interface elements.Args: object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.,object left - The left position of the new window. You can use number, px or %. For example: '10px'.,object top - The top position of the new window. You can use number, px or %. For example: '10px'. |
| InsertFloatingWindow | void | object item | Inserts a new `TabsWindow` instance into the application interface. The newly created window appears in floating mode, meaning it is not docked to any edge of the main window and can be freely repositioned by the user. This allows for independent movement and placement on the screen, separate from other docked interface elements. |
| InsertIntoBottom | void | object index, object item | Inserts a new `TabsWindow` into the `DockingLayout`. The new `TabsWindow` can be either instantiated directly or created from an object provided as the second argument. The insertion is performed by splitting the target item—identified by the index specified as the first argument—into two, and then placing the new `TabsWindow` as the vertical bottom neighbor of the target item within the layout.Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertIntoLeft | void | object index, object item | Inserts a new TabsWindow into the DockingLayout. This can be done by either creating a new TabsWindow instance or by using an existing object provided as the second argument. The new TabsWindow is added by splitting the target item—identified by the index supplied as the first argument—horizontally into two sections. The new TabsWindow is positioned to the immediate left of the target item within the layout.Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertIntoRight | void | object index, object item | Inserts a new TabsWindow into the DockingLayout, or creates a TabsWindow instance from the object provided as the second argument. The method targets the item at the index specified by the first argument, splits this item horizontally into two, and places the new TabsWindow as the immediate right-side neighbor of the original item.Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertIntoTop | void | object index, object item | Inserts a new TabsWindow into the DockingLayout, or creates a new TabsWindow instance from an object provided as the second argument. The new TabsWindow is added by splitting the target layout item—identified by the index given as the first argument—into two. The new TabsWindow is then positioned vertically as the top neighbor of the target item, effectively placing it above the existing item within the layout.Args: int index - The index to insert a new TabsWindow at.,object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertLayoutBottom | void | object item | Inserts a new `TabsWindow` into the `DockingLayout`, either by creating a fresh `TabsWindow` instance or by constructing one from an object provided as the second argument. The newly added item will appear as a top-level window docked to the bottom edge within the layout, making it easily accessible alongside other primary windows.Args: object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertLayoutLeft | void | object item | Inserts a new TabsWindow component into the DockingLayout, either by creating a fresh instance or by generating it from an object provided as the second argument. The newly added TabsWindow will appear as a top-level item, positioned on the left side within the layout container. This method ensures the TabsWindow becomes an immediate child of the layout, maintaining proper hierarchy and orientation.Args: object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertLayoutRight | void | object item | Inserts a new TabsWindow into the DockingLayout, or creates a TabsWindow instance from a provided configuration object (passed as the second argument). The new TabsWindow will be added as a top-level pane, positioned on the right side of the DockingLayout. This ensures the new item is immediately visible and accessible, docked alongside any existing top-level windows.Args: object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertLayoutTop | void | object item | Inserts a new TabsWindow into the DockingLayout. If an object is provided as the second argument, it creates a TabsWindow instance using the properties of that object. The newly created TabsWindow is added as a top-level item, positioned at the top region within the Layout, ensuring it appears as the foremost window in the layout’s hierarchy.Args: object item - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertOutsideTargetGroupBottom | void | object index, object tabsWindow | Inserts a new TabsWindow into the DockingLayout at the specified position, or instantiates a TabsWindow from the provided configuration object (second argument). When this method is called, the target item and its neighboring items are grouped within a new splitter component. This splitter acts as a sibling to the newly added TabsWindow within the layout hierarchy. The new TabsWindow is inserted below the specified target item (at the Bottom position), ensuring that the existing layout structure is preserved while accommodating the additional window.Args: int index - The index to insert a new TabsWindow at.,object tabsWindow - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertOutsideTargetGroupLeft | void | object index, object tabsWindow | Inserts a new `TabsWindow` into the `DockingLayout` at a specified position, or creates a `TabsWindow` instance from an object provided as the second argument. When this method is called, the specified target item and its neighboring items are grouped into a new splitter container, which becomes the adjacent sibling of the newly added `TabsWindow`. The new item is inserted to the left of the target item, effectively placing it before the target within the splitter.Args: int index - The index to insert a new TabsWindow at.,object tabsWindow - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertOutsideTargetGroupRight | void | object index, object tabsWindow | Inserts a new `TabsWindow` into the `DockingLayout`. You can either provide an existing `TabsWindow` instance or pass a configuration object as the second argument to create a new instance. When this method is called, the specified target item and its adjacent items are grouped together inside a new splitter container. This splitter container then becomes the neighbor of the newly added `TabsWindow`. The new `TabsWindow` is inserted immediately after the target item, positioned to the right. This allows you to easily add and organize tabbed windows within the docking layout, maintaining the correct structure and relationships between items."Args: int index - The index to insert a new TabsWindow at.,object tabsWindow - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| InsertOutsideTargetGroupTop | void | object index, object tabsWindow | Adds a new TabsWindow to the DockingLayout, or creates a TabsWindow instance from the object provided as the second argument. When invoked, this method groups the target item and its neighboring items within a new splitter component. This splitter then becomes the sibling (neighbor) of the newly added TabsWindow. The new TabsWindow is inserted above the target item (at the ‘Top’ position) within the layout, ensuring the original target and its neighbors maintain their relative positions inside the new splitter.Args: int index - The index to insert a new TabsWindow at.,object tabsWindow - An instance of a TabsWindow or an Object with the fields "label", "items" and other additional. |
| LoadState | void | IEnumerable<object> state | Loads a previously saved state of the element. If a state object is provided as an argument, the method will restore the element to that specific state. If no state is provided, the method will automatically attempt to retrieve the element's state from the browser's localStorage and apply it. This ensures that the element can be restored to its previous configuration either through a supplied state or from persistent storage.Args: IEnumerable<string> state - An array of objects that represents a cached state of the DockingLayout. The result of calling the 'saveState' method. |
| LoadState | void | N/A | Loads a previously saved state of the element. If a state object is provided as an argument, the method will restore the element to that specific state. If no state is provided, the method will automatically attempt to retrieve the element's state from the browser's localStorage and apply it. This ensures that the element can be restored to its previous configuration either through a supplied state or from persistent storage. |
| Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
| RemoveAll | void | N/A | Removes all child elements and content from the specified element, leaving it empty. |
| RemoveAt | void | object index | Removes a TabsWindow item from the DockingLayout component, effectively detaching the specified tabbed window from the DockingLayout structure. This operation updates the layout by eliminating the designated TabsWindow and its associated content from the parent element.Args: int index - The index of the TabsWindow to remove or a reference to it. |
| RemoveChild | dynamic | dynamic node | Removes a "smart-tabs-window" node from the DockingLayout structure. The "smart-tabs-window" represents a tabbed window component within the layout; this operation fully deletes the specified window and all its contents from the DockingLayout hierarchy.Args: dynamic node - The "smart-tabs-window" node to remove. |
| Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
| SaveState | object | N/A | Persists the current configuration of the DockingLayout to LocalStorage, capturing both the hierarchical structure and size of all layout components. This allows the layout—including panel arrangement, nesting, and dimensions—to be accurately restored in future sessions. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
| Undock | void | object node | This method detaches an item from the layout, removing it from the layout's structure while keeping its visual position unchanged. After calling this method, the item is no longer managed by the layout system and becomes an independent or 'floating' element. The undocked item can be reinserted into the layout at any time.Args: object node - A "smart-tabs-window" instance that is part of the DockingLayout. |
| Undock | void | string node | This method detaches an item from the layout, removing it from the layout's structure while keeping its visual position unchanged. After calling this method, the item is no longer managed by the layout system and becomes an independent or 'floating' element. The undocked item can be reinserted into the layout at any time.Args: string node - A "smart-tabs-window" instance that is part of the DockingLayout. |
| Undock | void | int node | This method detaches an item from the layout, removing it from the layout's structure while keeping its visual position unchanged. After calling this method, the item is no longer managed by the layout system and becomes an independent or 'floating' element. The undocked item can be reinserted into the layout at any time.Args: int node - A "smart-tabs-window" instance that is part of the DockingLayout. |
| Update | void | object index, object settings | Updates the properties of a TabsWindow and all of its contained tabs, including their order, content, and configuration settings.Args: int index - The index of the TabsWindow to update.,object settings - An object that contains the new settings for the TabsWindow item. Settings object is the same as defining a new TabsWindow with the exception of 'items' array where the items are defined. In order to change the label or content of a Tab item the user has to specify the index of the target tab item. |
DockingLayout Events
| Name | Type | Description | Event Detail |
|---|---|---|---|
| OnChange | EventCallback<Event> | This event is fired whenever a different tab is selected by the user, indicating a change in the active tab. <br/>"Note:" The "change" event might also be emitted by other JQX custom elements that are embedded within the tab items, not just by the tab selection itself. If you are handling this event, ensure that your code appropriately distinguishes between changes to the tab selection and changes triggered by nested custom elements. | N/A |
| Changed | event DockingLayoutChangedEventHandler | This event is fired whenever a different tab is selected by the user, indicating a change in the active tab. <br/>"Note:" The "change" event might also be emitted by other JQX custom elements that are embedded within the tab items, not just by the tab selection itself. If you are handling this event, ensure that your code appropriately distinguishes between changes to the tab selection and changes triggered by nested custom elements. | DockingLayoutChangedEventArgs |
| OnClose | EventCallback<Event> | This event is triggered whenever a Tab item or an entire Tabs Window (DockingLayout item) is closed by the user. It allows you to execute custom logic in response to the closing of individual tabs or when an entire collection of tabs (Tabs Window) is closed within the docking layout. | N/A |
| Closed | event DockingLayoutClosedEventHandler | This event is triggered whenever a Tab item or an entire Tabs Window (DockingLayout item) is closed by the user. It allows you to execute custom logic in response to the closing of individual tabs or when an entire collection of tabs (Tabs Window) is closed within the docking layout. | DockingLayoutClosedEventArgs |
| OnClosing | EventCallback<Event> | This event is fired just before a Tab item or Tabs Window is about to be closed. Within the event handler, you have the option to prevent the closing action by calling event.preventDefault(). This allows you to intercept the close operation—for example, to display a confirmation dialog or to perform cleanup tasks—before the Tab or Window is actually closed. If event.preventDefault() is not called, the Tab or Window will close as normal. | N/A |
| Closing | event DockingLayoutClosingEventHandler | This event is fired just before a Tab item or Tabs Window is about to be closed. Within the event handler, you have the option to prevent the closing action by calling event.preventDefault(). This allows you to intercept the close operation—for example, to display a confirmation dialog or to perform cleanup tasks—before the Tab or Window is actually closed. If event.preventDefault() is not called, the Tab or Window will close as normal. | DockingLayoutClosingEventArgs |
| OnStateChange | EventCallback<Event> | This event is triggered whenever an item's position within the Layout or its size has changed. It signifies that the item's state has been updated, allowing you to respond to layout or dimension adjustments in your application. Use this event to handle dynamic UI updates or to perform actions that depend on an item's current position or size. | N/A |
| StateChanged | event DockingLayoutStateChangedEventHandler | This event is triggered whenever an item's position within the Layout or its size has changed. It signifies that the item's state has been updated, allowing you to respond to layout or dimension adjustments in your application. Use this event to handle dynamic UI updates or to perform actions that depend on an item's current position or size. | DockingLayoutStateChangedEventArgs |
| OnResizeStart | EventCallback<Event> | This event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation. | N/A |
| ResizeStarted | event DockingLayoutResizeStartedEventHandler | This event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation. | DockingLayoutResizeStartedEventArgs |
| OnResizeEnd | EventCallback<Event> | This event is triggered when a user completes resizing an item, indicating that the resizing action has ended and the item's new dimensions have been set. | N/A |
| ResizeEnded | event DockingLayoutResizeEndedEventHandler | This event is triggered when a user completes resizing an item, indicating that the resizing action has ended and the item's new dimensions have been set. | DockingLayoutResizeEndedEventArgs |
Enums
DockingLayoutSnapMode
| DockingLayoutSnapMode.Simple |
| DockingLayoutSnapMode.Advanced |