DockingLayout — Smart UI JavaScript API

DockingLayout — Smart UI JavaScript API

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DockingLayout - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-docking-layout id="demo-dockinglayout"></smart-docking-layout>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.dockinglayout.js';

    const el = document.getElementById('demo-dockinglayout');
    if (el) {

      el.value = 'Quick start value';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: DockingLayout   Framework: JavaScript   Selector: smart-docking-layout

API counts: 23 properties, 34 methods, 6 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: autoHideBottom(), autoHideLeft(), autoHideRight(), autoHideTop(), clearState(), dock()

Common events: change, close, closing, stateChange, resizeStart, resizeEnd

Module hint: smart-webcomponents/source/modules/smart.dockinglayout.js

DockingLayout enables the creation of complex layouts consisting of panels that can be floated, docked, nested, resized, pinned.

Class

DockingLayout

DockingLayout

DockingLayout enables the creation of complex layouts consisting of panels that can be floated, docked, nested, resized, pinned.

Selector

smart-docking-layout

Quick picks

changedisableditems

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and will not play. For other supported values, animations are enabled and behave according to the specified mode. Use this property to control whether or how animations are rendered within the component.
AautoHideItemsA getter method that returns an array containing all DockingLayout items that are currently set to auto-hide within the specified element. These items are not visible in the main layout but are accessible through auto-hide panels or tabs.
LlayoutDefines 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' – An array of 'LayoutPanel' objects to be contained within this group.- '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' – Defines which buttons are visible in the panel header. Options include '[]', or any combination of ''close'' and ''autoHide''.- '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' – An array where each object defines a tab item in the panel.---### 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. Click for more details. Property object's options:
    LliveResizeWhen 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.
    UunlockKeyGets or sets the 'unlockKey', a unique code required to activate and access the full features of the product.
    LlocaleSpecifies 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.
    LlocalizeFormatFunctionCallback function used within the localization module, typically invoked to handle language changes, update localized content, or process localization-specific events.
    MmessagesManages 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.
    RreadonlyWhen 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.
    RrightToLeftGets 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.
    RresizeStepSpecifies 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.
    SsnapModeSpecifies the snap mode for drag-and-drop operations within the layout. There are two available modes: simple – Enables the user to drag and drop a single tab item either within the layout or outside of it. When dragging begins, a semi-transparent highlighter appears to clearly indicate all the valid drop zones for the tab. The user must drop the dragged tab inside one of these highlighted zones to complete the operation. advanced – Allows the dragging and dropping of an entire TabsWindow—containing all its tab items—or an individual tab. This mode adopts a Visual Studio-style visual feedback system: as an item is dragged, an overlay appears showing various possible drop locations, represented as icons. The user must drop the item directly onto one of these icons within the feedback overlay to position it in the desired location. 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.
    AautoLoadStateControls 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.
    TthemeSpecifies 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.
    UundockedItemsProvides a getter that returns an array containing all DockingLayout items that have been undocked. Undocked items are no longer part of the layout’s internal structure, meaning they have been removed from the main docking arrangement. However, these items remain available and can be reinserted into the layout by dragging and dropping them back in. This allows for flexible user interactions, such as temporarily removing panels and restoring them as needed.
    UunfocusableIf set to true, the element will be excluded from the tab order and cannot receive focus via keyboard navigation or mouse interaction.
    AautoSaveStateControls 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.
    DdisabledControls 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.
    DdraggableIf 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.
    FfloatableWhen 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.
    HhideSplitterBarsConceals all splitter bars within the specified element, preventing them from being visible or interactable by the user.
    IitemsA getter that retrieves an array containing all DockingLayout items currently docked within this element. The returned array includes each item that has been added to the DockingLayout as a docked component, allowing you to easily access and manipulate the docked items.
    CclosedItemsA getter method that retrieves and returns an array containing all DockingLayout items that have been closed by the user. Each item in the array represents a closed panel or component within the DockingLayout, allowing you to access and potentially restore their states or perform further operations on them.

    Events

    CchangeThis event is fired whenever a different tab is selected by the user, indicating a change in the active tab. Note: The "change" event might also be emitted by other Smart 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.
    CcloseThis 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.
    CclosingThis 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.
    SstateChangeThis 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.
    RresizeStartThis event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation.
    RresizeEndThis 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.

    Methods

    AautoHideBottomCreates 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.
    AautoHideLeftCreates 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.
    AautoHideRightCreates 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.
    AautoHideTopCreates 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.
    CclearStateRemoves all previously stored DockingLayout state information from localStorage, effectively resetting any cached layouts or user customizations and restoring the layout to its default configuration.
    DdockThis 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. Note: All items inserted with this method become top-level elements in the DockingLayout hierarchy.
    GgetAutoHideItemsReturns 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.
    GgetIndexReturns 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.
    GgetItemReturns a layout item from the docking layout based on its Id.
    GgetItemGroupElementReturns 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.
    GgetJSONStructureReturns 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.
    GgetStateReturns 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.
    IinsertAfterItemInserts 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."
    IinsertBeforeItemInserts 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.
    IinsertFloatingWindowInserts 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.
    IinsertIntoBottomInserts 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.
    IinsertIntoLeftInserts 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.
    IinsertIntoRightInserts 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.
    IinsertIntoTopInserts 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.
    IinsertLayoutBottomInserts 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.
    IinsertLayoutLeftInserts 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.
    IinsertLayoutRightInserts 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.
    IinsertLayoutTopInserts 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.
    IinsertOutsideTargetGroupBottomInserts 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.
    IinsertOutsideTargetGroupLeftInserts 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.
    IinsertOutsideTargetGroupRightInserts 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."
    IinsertOutsideTargetGroupTopAdds 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.
    LloadStateLoads 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.
    RremoveAllRemoves all child elements and content from the specified element, leaving it empty.
    RremoveAtRemoves 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.
    SsaveStatePersists 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.
    UundockThis 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.
    UupdateUpdates the properties of a TabsWindow and all of its contained tabs, including their order, content, and configuration settings.

    Properties

    animationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and will not play. For other supported values, animations are enabled and behave according to the specified mode. Use this property to control whether or how animations are rendered within the component."none" | "simple" | "advanced"

    Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and will not play. For other supported values, animations are enabled and behave according to the specified mode. Use this property to control whether or how animations are rendered within the component.

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    Default value

    "advanced"

    Examples

    Markup and runtime examples for animation:

    HTML:

    <smart-docking-layout animation="none"></smart-docking-layout>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-docking-layout');
el.animation = "simple";

    Read the current value:

    const el = document.querySelector('smart-docking-layout');
const animation = el.animation;

    autoHideItemsA getter method that returns an array containing all DockingLayout items that are currently set to auto-hide within the specified element. These items are not visible in the main layout but are accessible through auto-hide panels or tabs.object[]

    A getter method that returns an array containing all DockingLayout items that are currently set to auto-hide within the specified element. These items are not visible in the main layout but are accessible through auto-hide panels or tabs.

    Default value

    layoutDefines 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' – An array of 'LayoutPanel' objects to be contained within this group.- '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' – Defines which buttons are visible in the panel header. Options include '[]', or any combination of ''close'' and ''autoHide''.- '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' – An array where each object defines a tab item in the panel.---### 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. Click for more details. Property object's options:
      any

      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' – An array of 'LayoutPanel' objects to be contained within this group.
      - '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' – Defines which buttons are visible in the panel header. Options include '[]', or any combination of ''close'' and ''autoHide''.
      - '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' – An array where each object defines a tab item in the panel.

      ---

      ### 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.



      The 10 property's object value may have the following properties:
      • autoHide: boolean - Sets or gets the auto-hide behavior tab.
      • type: string - Layout item type.
      • orientation: string - Sets or gets the column's icon. Expects CSS class name.
      • size: string | number - Sets the layout size in pixels or percentages.
      • id: string - Sets the layout panel id.
      • label: string - Sets or gets the text displayed in the tab's header.
      • content: string - Sets or gets whether the layout panel's content.
      • selected: boolean - Sets or gets the selected tab.
      • tabPosition: string - Sets or gets the tab header position.
      • items: [] - Sets or gets the layout items
        • autoHide: boolean - Sets or gets the auto-hide behavior tab.
          • autoHide
        • type: string - Layout item type.
          • type
        • orientation: string - Sets or gets the column's icon. Expects CSS class name.
          • orientation
        • size: string | number - Sets the layout size in pixels or percentages.
          • size
        • id: string - Sets the layout panel id.
          • id
        • label: string - Sets or gets the text displayed in the tab's header.
          • label
        • content: string - Sets or gets whether the layout panel's content.
          • content
        • selected: boolean - Sets or gets the selected tab.
          • selected
        • tabPosition: string - Sets or gets the tab header position.
          • tabPosition
        • items: [] - Sets or gets the layout items
          • items
      Try a demo showcasing the layout property.

      Examples

      Markup and runtime examples for layout:

      HTML:

      <smart-docking-layout layout="[]"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.layout = [
      { type: 'LayoutPanelGroup', 
       orientation: 'horizontal', 
       items: [ 
       { 
       type: 'LayoutPanel', 
       label: 'Tabs 1', 
       items: [
       { 
       type: 'LayoutPanelItem', 
       label: 'Tab 1', 
       content: 'Content of Tab 1', 
       selected: true 
      }]
       }, 
      { 
       type: 'LayoutPanel', 
       label: 'Tabs 2', 
       items: [
      { 
       type: 'LayoutPanelItem', 
       label: 'Tab 2', 
       content: 'Content of Tab 2' 
      }]
      }
       ]}, 
      { 
       type: 'LayoutPanel', 
       label: 'Tabs 3',
       items: [
      { 
      type: 'LayoutPanelItem', 
      label: 'Tab 3', 
      content: 'Content of Tab 3' 
      }]
      }];

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const layout = el.layout;

      liveResizeWhen 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.boolean

      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.

      Default value

      false

      Examples

      Markup and runtime examples for liveResize:

      HTML attribute:

      <smart-docking-layout live-resize></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.liveResize = true;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const liveResize = el.liveResize;

      unlockKeyGets or sets the 'unlockKey', a unique code required to activate and access the full features of the product.string

      Gets or sets the 'unlockKey', a unique code required to activate and access the full features of the product.

      Default value

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

      <smart-docking-layout unlock-key=""></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.unlockKey = "1111-2222-3333-4444-5555";

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const unlockKey = el.unlockKey;

      localeSpecifies 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.string

      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.

      Default value

      "en"

      Examples

      Markup and runtime examples for locale:

      HTML:

      <smart-docking-layout locale="de"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.locale = "fr";

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const locale = el.locale;

      localizeFormatFunctionCallback function used within the localization module, typically invoked to handle language changes, update localized content, or process localization-specific events.function | null

      Callback function used within the localization module, typically invoked to handle language changes, update localized content, or process localization-specific events.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

      <smart-docking-layout localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const localizeFormatFunction = el.localizeFormatFunction;

      messagesManages 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.object

      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.

      Default value




      "en": {

      "propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

      "propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

      "propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

      "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

      "moduleUndefined": "Module is undefined.",

      "missingReference": "{{elementType}}: Missing reference to {{files}}.",

      "htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

      "invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

      "invalidNode": "{{elementType}}: '{{method}}' method accepts an instance of Smart.TabsWindow",

      "invalidNodeRemove": "{{elementType}}: '{{method}}' method accepts an instance of Smart.TabsWindow that is a child of the DockingLayout.",

      "invalidNodeType": "{{elementType}}: The method '{{method}}' requires a \"smart-tabs-window\" element to be passed as an argument.",

      "invalidTargetNode": "{{elementType}}: The method '{{method}}' requires an index of an item that is not hidden/closed. Only visible items that are part of the Layout are valid.",

      "invalidIndex": "{{elementType}}: '{{method}}' method accepts an index of type number.",

      "noId": "smartDockingLayout requires an id in order to save/load a state."

      }

      Examples

      Markup and runtime examples for messages:

      HTML:

      <smart-docking-layout messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: '{{method}}' Die Methode akzeptiert eine Instanz von Smart.TabsWindow","invalidNodeRemove":"{{elementType}}: '{{method}}' Die Methode akzeptiert eine Instanz von Smart.TabsWindow, die dem DockingLayout untergeordnet ist.","invalidNodeType":"{{elementType}}: Fur die Methode '{{method}}' muss ein Element \"smart-tabs-window\" als Argument ubergeben werden.","invalidTargetNode":"{{elementType}}: Die Methode '{{method}}' erfordert einen Index eines Elements, das nicht ausgeblendet / geschlossen wird. Nur sichtbare Elemente, die Teil des Layouts sind, sind gultig.","invalidIndex":"{{elementType}}: '{{method}}' Methode akzeptiert einen Index der Typennummer.","noId":"qxDockingLayout benotigt eine ID, um einen Zustand zu speichern / laden."}}"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: '{{method}}' method accepts an instance of Smart.TabsWindow","invalidNodeRemove":"{{elementType}}: '{{method}}' method accepts an instance of Smart.TabsWindow that is a child of the DockingLayout.","invalidNodeType":"{{elementType}}: The method '{{method}}' requires a \"smart-tabs-window\" element to be passed as an argument.","invalidTargetNode":"{{elementType}}: The method '{{method}}' requires an index of an item that is not hidden/closed. Only visible items that are part of the Layout are valid.","invalidIndex":"{{elementType}}: '{{method}}' method accepts an index of type number.","noId":"smartDockingLayout requires an id in order to save/load a state."}};

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const messages = el.messages;

      readonlyWhen 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.boolean

      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.

      Default value

      false

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

      <smart-docking-layout readonly></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.readonly = true;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const readonly = el.readonly;

      rightToLeftGets 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the rightToLeft property.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

      <smart-docking-layout right-to-left></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.rightToLeft = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const rightToLeft = el.rightToLeft;

      resizeStepSpecifies 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.number

      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.

      Default value

      5

      Examples

      Markup and runtime examples for resizeStep:

      HTML:

      <smart-docking-layout resize-step="10"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.resizeStep = 20;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const resizeStep = el.resizeStep;

      snapModeSpecifies the snap mode for drag-and-drop operations within the layout. There are two available modes: simple – Enables the user to drag and drop a single tab item either within the layout or outside of it. When dragging begins, a semi-transparent highlighter appears to clearly indicate all the valid drop zones for the tab. The user must drop the dragged tab inside one of these highlighted zones to complete the operation. advanced – Allows the dragging and dropping of an entire TabsWindow—containing all its tab items—or an individual tab. This mode adopts a Visual Studio-style visual feedback system: as an item is dragged, an overlay appears showing various possible drop locations, represented as icons. The user must drop the item directly onto one of these icons within the feedback overlay to position it in the desired location. 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."simple" | "advanced"

      Specifies the snap mode for drag-and-drop operations within the layout. There are two available modes:




      simple – Enables the user to drag and drop a single tab item either within the layout or outside of it. When dragging begins, a semi-transparent highlighter appears to clearly indicate all the valid drop zones for the tab. The user must drop the dragged tab inside one of these highlighted zones to complete the operation.




      advanced – Allows the dragging and dropping of an entire TabsWindow—containing all its tab items—or an individual tab. This mode adopts a Visual Studio-style visual feedback system: as an item is dragged, an overlay appears showing various possible drop locations, represented as icons. The user must drop the item directly onto one of these icons within the feedback overlay to position it in the desired location.




      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.

      Default value

      "advanced"
      Try a demo showcasing the snapMode property.

      Examples

      Markup and runtime examples for snapMode:

      HTML:

      <smart-docking-layout snap-mode="advanced"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.snapMode = "simple";

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const snapMode = el.snapMode;

      autoLoadStateControls 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the autoLoadState property.

      Examples

      Markup and runtime examples for autoLoadState:

      HTML attribute:

      <smart-docking-layout auto-load-state></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.autoLoadState = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const autoLoadState = el.autoLoadState;

      themeSpecifies 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.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.

      Default value

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

      <smart-docking-layout theme="blue"></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.theme = "red";

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const theme = el.theme;

      undockedItemsProvides a getter that returns an array containing all DockingLayout items that have been undocked. Undocked items are no longer part of the layout’s internal structure, meaning they have been removed from the main docking arrangement. However, these items remain available and can be reinserted into the layout by dragging and dropping them back in. This allows for flexible user interactions, such as temporarily removing panels and restoring them as needed.object[]

      Provides a getter that returns an array containing all DockingLayout items that have been undocked. Undocked items are no longer part of the layout’s internal structure, meaning they have been removed from the main docking arrangement. However, these items remain available and can be reinserted into the layout by dragging and dropping them back in. This allows for flexible user interactions, such as temporarily removing panels and restoring them as needed.

      Default value

      Try a demo showcasing the undockedItems property.

      unfocusableIf set to true, the element will be excluded from the tab order and cannot receive focus via keyboard navigation or mouse interaction.boolean

      If set to true, the element will be excluded from the tab order and cannot receive focus via keyboard navigation or mouse interaction.

      Default value

      false

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

      <smart-docking-layout unfocusable></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.unfocusable = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const unfocusable = el.unfocusable;

      autoSaveStateControls 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the autoSaveState property.

      Examples

      Markup and runtime examples for autoSaveState:

      HTML attribute:

      <smart-docking-layout auto-save-state></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.autoSaveState = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const autoSaveState = el.autoSaveState;

      disabledControls 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the disabled property.

      Examples

      Markup and runtime examples for disabled:

      HTML attribute:

      <smart-docking-layout disabled></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.disabled = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const disabled = el.disabled;

      draggableIf 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.boolean

      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.

      Default value

      true
      Try a demo showcasing the draggable property.

      Examples

      Markup and runtime examples for draggable:

      HTML attribute:

      <smart-docking-layout draggable></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.draggable = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const draggable = el.draggable;

      floatableWhen 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.boolean

      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.

      Default value

      true

      Examples

      Markup and runtime examples for floatable:

      HTML attribute:

      <smart-docking-layout floatable></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.floatable = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const floatable = el.floatable;

      hideSplitterBarsConceals all splitter bars within the specified element, preventing them from being visible or interactable by the user.boolean

      Conceals all splitter bars within the specified element, preventing them from being visible or interactable by the user.

      Default value

      false

      Examples

      Markup and runtime examples for hideSplitterBars:

      HTML attribute:

      <smart-docking-layout hide-splitter-bars></smart-docking-layout>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-docking-layout');
el.hideSplitterBars = false;

      Read the current value:

      const el = document.querySelector('smart-docking-layout');
const hideSplitterBars = el.hideSplitterBars;

      itemsA getter that retrieves an array containing all DockingLayout items currently docked within this element. The returned array includes each item that has been added to the DockingLayout as a docked component, allowing you to easily access and manipulate the docked items.object[]

      A getter that retrieves an array containing all DockingLayout items currently docked within this element. The returned array includes each item that has been added to the DockingLayout as a docked component, allowing you to easily access and manipulate the docked items.

      Default value

      Try a demo showcasing the items property.

      closedItemsA getter method that retrieves and returns an array containing all DockingLayout items that have been closed by the user. Each item in the array represents a closed panel or component within the DockingLayout, allowing you to access and potentially restore their states or perform further operations on them.object[]

      A getter method that retrieves and returns an array containing all DockingLayout items that have been closed by the user. Each item in the array represents a closed panel or component within the DockingLayout, allowing you to access and potentially restore their states or perform further operations on them.

      Default value

      Try a demo showcasing the closedItems property.

      Events

      changeThis event is fired whenever a different tab is selected by the user, indicating a change in the active tab. Note: The "change" event might also be emitted by other Smart 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.CustomEvent

      This event is fired whenever a different tab is selected by the user, indicating a change in the active tab.
      Note: The "change" event might also be emitted by other Smart 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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onChange

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Try a demo showcasing the change event.

      Examples

      Listen for change using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('change', (event) => {
	// event handling code goes here.
})

      closeThis 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.CustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onClose

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for close using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

      closingThis 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.CustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onClosing

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for closing using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

      stateChangeThis 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.CustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onStateChange

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Try a demo showcasing the stateChange event.

      Examples

      Listen for stateChange using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('stateChange', (event) => {
	// event handling code goes here.
})

      resizeStartThis event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation.CustomEvent

      This event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onResizeStart

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for resizeStart using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('resizeStart', (event) => {
	// event handling code goes here.
})

      resizeEndThis 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.CustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onResizeEnd

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for resizeEnd using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-docking-layout')?.addEventListener('resizeEnd', (event) => {
	// event handling code goes here.
})

      Methods

      autoHideBottom( node: HTMLElement | number | string): voidCreates 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.

      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.

      Arguments

      nodeHTMLElement | number | string

      The "smart-tabs-window" or "smart-tab-item" node to append

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.autoHideBottom("node");

      Try a demo showcasing the autoHideBottom method.

      autoHideLeft( node: HTMLElement | number | string): voidCreates 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.

      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.

      Arguments

      nodeHTMLElement | number | string

      The "smart-tabs-window" or "smart-tab-item" node to append

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.autoHideLeft("node");

      Try a demo showcasing the autoHideLeft method.

      autoHideRight( node: HTMLElement | number | string): voidCreates 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.

      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.

      Arguments

      nodeHTMLElement | number | string

      The "smart-tabs-window" or "smart-tab-item" node to append

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.autoHideRight("node");

      Try a demo showcasing the autoHideRight method.

      autoHideTop( node: HTMLElement | number | string): voidCreates 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.

      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.

      Arguments

      nodeHTMLElement | number | string

      The "smart-tabs-window" or "smart-tab-item" node to append

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.autoHideTop("node");

      Try a demo showcasing the autoHideTop method.

      clearState(): voidRemoves all previously stored DockingLayout state information from localStorage, effectively resetting any cached layouts or user customizations and restoring the layout to its default configuration.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.clearState();

      Try a demo showcasing the clearState method.

      dock( node: string | number | Node): NodeThis 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. Note: All items inserted with this method become top-level elements in the DockingLayout hierarchy.

      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.
      Note: All items inserted with this method become top-level elements in the DockingLayout hierarchy.

      Arguments

      nodestring | number | Node

      An autohidden "smart-tabs-window" item instance or a new "smart-tabs-window" instance.

      ReturnsNode

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.dock("0");

      Try a demo showcasing the dock method.

      getAutoHideItems( orientation?: string): []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.

      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.

      Arguments

      orientation?string

      Determines which auto hidden items to return ( vertical or horizontal ). If not set the method will return all autohidden items. Possible values: 'vertical', 'horizontal'.

      Returns[]

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getAutoHideItems("horizontal");

      getIndex( node: HTMLElement): numberReturns 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.

      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.

      Arguments

      nodeHTMLElement

      Returns the index of the target item.

      Returnsnumber

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getIndex("dockingLayoutItem");

      getItem( id: HTMLElement | number | string): anyReturns a layout item from the docking layout based on its Id.

      Returns a layout item from the docking layout based on its Id.

      Arguments

      idHTMLElement | number | string

      The id of the item

      Returnsany

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getItem("id1","id2");

      getItemGroupElement( item?: HTMLElement): HTMLElementReturns 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.

      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.

      Arguments

      item?HTMLElement

      DockingLayout item

      ReturnsHTMLElement

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getItemGroupElement("Item0");

      Try a demo showcasing the getItemGroupElement method.

      getJSONStructure(): []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.

      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.

      Returns[]

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getJSONStructure();

      Try a demo showcasing the getJSONStructure method.

      getState( noInstances?: boolean): []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.

      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.

      Arguments

      noInstances?boolean

      Determines if the returned array will contain HTML references or not. When saving to localStorage the resulted array should not contain any HTMLElement references.

      Returns[]

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.getState(false);

      Try a demo showcasing the getState method.

      insertAfterItem( index: number | HTMLElement | string, item: any): voidInserts 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."

      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."

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertAfterItem("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertAfterItem method.

      insertBeforeItem( index: number | HTMLElement | string, item: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertBeforeItem("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertBeforeItem method.

      insertFloatingWindow( item: any, left?: number | string, top?: number | string): voidInserts 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.

      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.

      Arguments

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      left?number | string

      The left position of the new window. You can use number, px or %. For example: '10px'.

      top?number | string

      The top position of the new window. You can use number, px or %. For example: '10px'.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertFloatingWindow("{ 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertFloatingWindow method.

      insertIntoBottom( index: number | HTMLElement | string, item: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertIntoBottom("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertIntoBottom method.

      insertIntoLeft( index: number | HTMLElement | string, item: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertIntoLeft("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertIntoLeft method.

      insertIntoRight( index: number | HTMLElement | string, item: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertIntoRight("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertIntoRight method.

      insertIntoTop( index: number | HTMLElement | string, item: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertIntoTop("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertIntoTop method.

      insertLayoutBottom( item: any): voidInserts 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.

      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.

      Arguments

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertLayoutBottom("{ 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}");

      Try a demo showcasing the insertLayoutBottom method.

      insertLayoutLeft( item: any): voidInserts 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.

      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.

      Arguments

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertLayoutLeft("{ 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}");

      Try a demo showcasing the insertLayoutLeft method.

      insertLayoutRight( item: any): voidInserts 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.

      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.

      Arguments

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertLayoutRight("{ 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}");

      Try a demo showcasing the insertLayoutRight method.

      insertLayoutTop( item: any): voidInserts 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.

      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.

      Arguments

      itemany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertLayoutTop("{ 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}");

      Try a demo showcasing the insertLayoutTop method.

      insertOutsideTargetGroupBottom( index: number | HTMLElement | string, tabsWindow: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      tabsWindowany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertOutsideTargetGroupBottom("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertOutsideTargetGroupBottom method.

      insertOutsideTargetGroupLeft( index: number | HTMLElement | string, tabsWindow: any): voidInserts 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      tabsWindowany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertOutsideTargetGroupLeft("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertOutsideTargetGroupLeft method.

      insertOutsideTargetGroupRight( index: number | HTMLElement | string, tabsWindow: any): voidInserts 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."

      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."

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      tabsWindowany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertOutsideTargetGroupRight("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertOutsideTargetGroupRight method.

      insertOutsideTargetGroupTop( index: number | HTMLElement | string, tabsWindow: any): voidAdds 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index to insert a new TabsWindow at.

      tabsWindowany

      An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.insertOutsideTargetGroupTop("1, { 'label': 'New TAB', 'items: [{ label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }]''}, 'bottom'");

      Try a demo showcasing the insertOutsideTargetGroupTop method.

      loadState( state?: any[]): voidLoads 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.

      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.

      Arguments

      state?any[]

      An array of objects that represents a cached state of the DockingLayout. The result of calling the 'saveState' method.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.loadState("state");

      Try a demo showcasing the loadState method.

      removeAll(): voidRemoves all child elements and content from the specified element, leaving it empty.

      Removes all child elements and content from the specified element, leaving it empty.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.removeAll();

      removeAt( index: number | HTMLElement | string): voidRemoves 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.

      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.

      Arguments

      indexnumber | HTMLElement | string

      The index of the TabsWindow to remove or a reference to it.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.removeAt(2);

      Try a demo showcasing the removeAt method.

      removeChild( node: Node): TRemoves 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.

      Arguments

      nodeNode

      The "smart-tabs-window" node to remove.

      ReturnsNode

      saveState(): anyPersists 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.

      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.

      Returnsany

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      const result = document.querySelector('smart-docking-layout')?.saveState();

      Try a demo showcasing the saveState method.

      undock( node: string | number | Node): voidThis 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.

      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.

      Arguments

      nodestring | number | Node

      A "smart-tabs-window" instance that is part of the DockingLayout.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.undock("tabsWindow");

      Try a demo showcasing the undock method.

      update( index: number | HTMLElement | string, settings: any): voidUpdates the properties of a TabsWindow and all of its contained tabs, including their order, content, and configuration settings.

      Updates the properties of a TabsWindow and all of its contained tabs, including their order, content, and configuration settings.

      Arguments

      indexnumber | HTMLElement | string

      The index of the TabsWindow to update.

      settingsany

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-dockinglayout, if you host multiple widgets):

      document.querySelector('smart-docking-layout')?.update("2, { \"items\": [ { \"index\": 2, \"label\": \"New Label\", \"content\": \"New Content\"}], \"size\": 250,  \"min\": 100 }");

      Try a demo showcasing the update method.

      CSS Variables

      --smart-docking-layout-default-widthvar()

      Default value

      "1000px"

      smartDropDownList, smartComboBox default width

      --smart-docking-layout-default-heightvar()

      Default value

      "800px"

      smartDropDownList, smartComboBox default height

      --smart-docking-layout-feedback-background-secondary-sizevar()

      Default value

      "7px"

      The size of the arrows of the advanced snapping highlighters that show possible drop position of the dragged item.