DockingLayout API

DockingLayout Javascript API

Class

DockingLayout

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

Selector

smart-docking-layout

Properties

Events

Methods

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default value

"advanced"

Example

Set the animation property.

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

Set the animation property by using the HTML Element's instance.

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

Get the animation property.

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

autoHideItemsobject[]

A getter that returns an array of all DockingLayout items that are auto hidden inside the element.

Default value

autoLoadStateboolean

Enable/Disable the automatic state loading. There must be a previously saved state of the Layout in order to load it.

Default value

false

Example

Set the autoLoadState property.

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

Set the autoLoadState property by using the HTML Element's instance.

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

Get the autoLoadState property.

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

autoSaveStateboolean

Enable/Disable the automatic state saving.
Note: In order to save the state of the element it must have an id.

Default value

false

Example

Set the autoSaveState property.

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

Set the autoSaveState property by using the HTML Element's instance.

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

Get the autoSaveState property.

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

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

Get the disabled property.

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

draggableboolean

If set to false it will disable the dragging of DockingLayout items. If set items can only be repositioned using the API methods.

Default value

true

Example

Set the draggable property.

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

Set the draggable property by using the HTML Element's instance.

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

Get the draggable property.

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

floatableboolean

If set to false it will disable item floating. This means that if a Window is floated as a result of dragging it will be returned back ot it's original position instead of being floated outside the DockingLayout. Already floated LayoutPanel items will not be affected.

Default value

true

Example

Set the floatable property.

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

Set the floatable property by using the HTML Element's instance.

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

Get the floatable property.

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

hideSplitterBarsboolean

Hides all splitter bars inside the element.

Default value

false

Example

Set the hideSplitterBars property.

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

Set the hideSplitterBars property by using the HTML Element's instance.

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

Get the hideSplitterBars property.

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

itemsobject[]

A getter that returns an array of all DockingLayout items that are docked inside the element.

Default value

closedItemsobject[]

A getter that returns an array of all DockingLayout items that have been closed.

Default value

layoutobject[]

Determines the structure of the element. This property represents an array of objects that define the hierarchy of the items inside the element and their specific settings. Each object must have a type attribute that defines it's behavior.
Three types of objects are allowed:

  • LayoutGroup - Represents a group of items (Splitter). Used when the user wants more than one DockingLayout item in a single container.
    Properties:
    • orientation - A string value indicating the orientation of the Splitter group. Possible values: 'horizontal', 'vertical'.
    • size - A string | number value indicating the size of the Splitter group.
    • items - An array of LayoutPanel object definitions.
    • resizeMode - A string indicating the resize mode. Possible values: 'none', 'adjacent', 'end', 'proportional'.
    • resizeStep - A nummeric value that determines the step of resizing.
    • liveResize - Determines if splitter resizing happens while dragging or not.
  • LayoutPanel - Represents a DockingLayout item (TabsWindow). LayoutPanels can have one or many items (TabItem).
    Properties:
    • id - the ID of the LayoutPanel.
    • autoHide - a boolean property that determines if the LayoutPanel is autoHidden.
    • autoHidePosition - determines the autoHide position of the item if 'autoHide' property is set. Possible values: 'top', 'bottom', 'left', 'right'.
    • dropPosition - Determines the possible positions for the item at which a new item can be dropped as a result of dragging. Possible values: 'top', 'bottom', 'left', 'right', 'center', 'header', 'layout-top', 'layout-bottom', 'layout-left', 'layout-right'. Positions with the 'layout' prefix reflect on LayoutPanelItems that are children of the LayoutPanel.
    • label - the Label of the LayoutPanel window.
    • tabPosition - Determines the position of the Tab labels inside the LayoutPanel.
    • layout - determines the DockingLayout owner of the LayoutPanel. Accepts a string indicating the ID of a DockingLayout on the page or a direct reference to it.
    • headerButtons - an Array of strings that define the buttons in the header section of the DockingLayout item.
    • tabCloseButtons - a boolean property that Enables or disables the close buttons inside each Tab item label inside the DockingLayout item.
    • tabOverflow - same as 'overflow' property of smartTabs. It defines the overflow mode of the labels of the Tab items inside a DockingLayout item.
    • selectionMode - the same as smartTabs selection modes. Applies to Tab items inside a DockingLayout item.
    • tabResize - the same as 'resize' property of smartTabs. Allows resizing the Tab labels inside the DockingLayout item.
    • locked - Locks the size of the item and does not allow resizing.
    • max - sets the maximum size of the item.
    • min - sets the minimum size of the item
    • size - sets the size of the item.
    • items - an array of objects. Each object defines the structure of a LayoutPanelItem.
  • LayoutPanelItem - Represents a LayoutPanel item (TabItem).
    Properties:
    • id - the ID of the Tab item.
    • label - a string representing the label of the Tab item.
    • content - represents the content of the Tab item. Can be anything.
    • selected - determines if the item is selected. By default the first added item to the LayoutPanel is automatically selected.
    • disableDrag - a boolean property that disables the dragging of the Tab item.

Example

Set the layout property.

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

Set the layout property by using the HTML Element's instance.

 const dockinglayout = document.querySelector('smart-docking-layout');
 dockinglayout.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'
}]
}];

Get the layout property.

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

liveResizeboolean

When enabled the resizing operation happens live. By default this feature is not enabled and the user sees a hightlighted bar while dragging instead of the actual splitter bar.

Default value

false

Example

Set the liveResize property.

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

Set the liveResize property by using the HTML Element's instance.

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

Get the liveResize property.

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

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

Get the locale property.

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

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

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

Set the localizeFormatFunction property by using the HTML Element's instance.

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

Get the localizeFormatFunction property.

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

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

}

Example

Set the messages property.

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

Set the messages property by using the HTML Element's instance.

 const dockinglayout = document.querySelector('smart-docking-layout');
 dockinglayout.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."}};

Get the messages property.

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

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

Get the readonly property.

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

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

Get the rightToLeft property.

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

resizeStepnumber

Determines the resize step during reisizing

Default value

5

Example

Set the resizeStep property.

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

Set the resizeStep property by using the HTML Element's instance.

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

Get the resizeStep property.

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

snapMode"simple" | "advanced"

Determines the snap mode. Two modes are available:

  • simple - allows dragging of a single tab item inside or outside the layout. A semi-transparent highlighter is used to indicate the possible locations where the dragged item can be dropped. The user has to drop the dragged item inside one of the possible drop zones indicated by the highlighter.
  • advanced - allows dragging of a whole TabsWindow with items or a single tab item. Uses a Visual Studio style feedback that indicates the possible drop locations. The user has to drop the target over one of the icons inside the feedback.

The feedback/highlighter is displayed when the dragging of an item begins.

Default value

"advanced"

Example

Set the snapMode property.

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

Set the snapMode property by using the HTML Element's instance.

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

Get the snapMode property.

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

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

Get the theme property.

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

undockedItemsobject[]

A getter that returns an array of all DockingLayout items that have been undocked. Undocked items are no more part of the Layout's interal structure but can be inserted by dragging them in.

Default value

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

Get the unfocusable property.

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

Events

changeCustomEvent

This event is triggered when the tab selection is changed. Note: Change event may be thrown by other Smart Custom Elements nested inside the Tab items.

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

Example

Set up the event handler of change event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('change', function (event) {
	// event handling code goes here.
}

closeCustomEvent

This event is triggered when a Tab item or a whole Tabs Window item ( DockingLayout item ) is closed.

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

Example

Set up the event handler of close event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('close', function (event) {
	// event handling code goes here.
}

closingCustomEvent

This event is triggered when a Tab item/Tabs Window is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

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

Example

Set up the event handler of closing event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('closing', function (event) {
	// event handling code goes here.
}

stateChangeCustomEvent

This event is triggered when an item's position inside the Layout or it's size has been changed. Indicates that a state change has occured.

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

Example

Set up the event handler of stateChange event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('stateChange', function (event) {
	// event handling code goes here.
}

resizeStartCustomEvent

This event is triggered when item resizing begins.

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

Example

Set up the event handler of resizeStart event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('resizeStart', function (event) {
	// event handling code goes here.
}

resizeEndCustomEvent

This event is triggered when item resizing finishes.

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

Example

Set up the event handler of resizeEnd event.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('resizeEnd', function (event) {
	// event handling code goes here.
}

Methods

autoHideBottom( node: HTMLElement | number | string): void

Makes a "smart-tabs-window" node, that is a child of the Layout, auto hidden by placing it at the Bottom position inside the element. This means that the item will be positioned near the bottom side of the layout and it's content will be hidden until the user selects one of it's labels.

Arguments

nodeHTMLElement | number | string

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


Invoke the autoHideBottom method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.autoHideBottom("node");

autoHideLeft( node: HTMLElement | number | string): void

Makes a "smart-tabs-window" node, that is a child of the Layout, auto hidden by placing it at the Left position inside the layout. This means that the item will be positioned near the left side of the layout and it's content will be hidden until the user selects one of it's labels.

Arguments

nodeHTMLElement | number | string

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


Invoke the autoHideLeft method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.autoHideLeft("node");

autoHideRight( node: HTMLElement | number | string): void

Makes a "smart-tabs-window" node, that is a child of the Layout, auto hidden by placing it at the Right position inside the layout. This means that the item will be positioned near the right side of the layout and it's content will be hidden until the user selects one of it's labels.

Arguments

nodeHTMLElement | number | string

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


Invoke the autoHideRight method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.autoHideRight("node");

autoHideTop( node: HTMLElement | number | string): void

Makes a "smart-tabs-window" node, that is a child of the Layout, auto hidden by placing it at the Top position inside the layout. This means that the item will be positioned near the top side of the layout and it's content will be hidden until the user selects one of it's labels.

Arguments

nodeHTMLElement | number | string

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


Invoke the autoHideTop method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.autoHideTop("node");

clearState(): void

Clears the localStorage of any previous cached state of the DockingLayout.


Invoke the clearState method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.clearState(false);

dock( node: string | number | Node): Node

The method will reset an autohidden item to it's normal behavior and re-insert it at a specified position. It can also be used to insert items into the DockingLayout. Note: Items inserted via this method are added as a top level items.

Arguments

nodestring | number | Node

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

ReturnsNode

Invoke the dock method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.dock(false);

insertBeforeItem( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted before the target item which corresponds to the index passed as the first argument to the method.

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.


Invoke the insertBeforeItem method.

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

insertAfterItem( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted after the target item which corresponds to the index passed as the first argument to the method.

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.


Invoke the insertAfterItem method.

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

insertIntoLeft( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted by splitting the target item which corresponds to the index passed as the first argument to the method in two and placing the new item as it's left neighbour horizontally.

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.


Invoke the insertIntoLeft method.

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

insertIntoRight( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted by splitting the target item which corresponds to the index passed as the first argument to the method in two and placing the new item as it's right neighbour horizontally.

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.


Invoke the insertIntoRight method.

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

insertIntoTop( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted by splitting the target item which corresponds to the index passed as the first argument to the method in two and placing the new item as it's top neighbour vertically.

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.


Invoke the insertIntoTop method.

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

insertIntoBottom( index: number | HTMLElement | string, item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted by splitting the target item which corresponds to the index passed as the first argument to the method in two and placing the new item as it's bottom neighbour vertically.

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.


Invoke the insertIntoBottom method.

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

insertLayoutTop( item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted as a top level item positioned at the top side inside the Layout.

Arguments

itemany

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


Invoke the insertLayoutTop method.

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

insertLayoutBottom( item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted as a top level item positioned at the bottom side inside the Layout.

Arguments

itemany

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


Invoke the insertLayoutBottom method.

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

insertLayoutLeft( item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted as a top level item positioned at the left side inside the Layout.

Arguments

itemany

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


Invoke the insertLayoutLeft method.

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

insertLayoutRight( item: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The new item is inserted as a top level item positioned at the right inside the Layout.

Arguments

itemany

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


Invoke the insertLayoutRight method.

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

insertOutsideTargetGroupTop( index: number | HTMLElement | string, tabsWindow: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The target item and it's neighbour items are placed inside a new splitter item that acts as the new neghbour of the newly added item via this method. The new item is inserted above the target ( at position Top).

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.


Invoke the insertOutsideTargetGroupTop method.

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

insertOutsideTargetGroupBottom( index: number | HTMLElement | string, tabsWindow: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The target item and it's neighbour items are placed inside a new splitter item that acts as the new neghbour of the newly added item via this method. The new item is inserted bellow the target ( at position Bottom).

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.


Invoke the insertOutsideTargetGroupBottom method.

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

insertOutsideTargetGroupLeft( index: number | HTMLElement | string, tabsWindow: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The target item and it's neighbour items are placed inside a new splitter item that acts as the new neghbour of the newly added item via this method. The new item is inserted before the target ( at position Left).

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.


Invoke the insertOutsideTargetGroupLeft method.

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

insertOutsideTargetGroupRight( index: number | HTMLElement | string, tabsWindow: any): void

Inserts a new TabsWindow into the DockingLayout or creates a TabsWindow instance from an object passed as the second argument. The target item and it's neighbour items are placed inside a new splitter item that acts as the new neghbour of the newly added item via this method. The new item is inserted after the target ( at position Right).

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.


Invoke the insertOutsideTargetGroupRight method.

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

getAutoHideItems( node?: string): []

The method returns an array of all autohidden items.

Arguments

node?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[]

Invoke the getAutoHideItems method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.getAutoHideItems(false);

getIndex( node: HTMLElement): number

The method returns the index of a target item.

Arguments

nodeHTMLElement

Returns the index of the target item.

Returnsnumber

Invoke the getIndex method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.getIndex("dockingLayoutItem");

getState( noInstances?: boolean): []

Returns an array of objects representing the current structure of the element. Each object represents a Layout item with it's settings and hierarchy.

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[]

Invoke the getState method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.getState(false);

getItemGroupElement( item?: HTMLElement): HTMLElement

Returns the Splitter parent of a Layout item

Arguments

item?HTMLElement

DockingLayout item

ReturnsHTMLElement

Invoke the getItemGroupElement method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.getItemGroupElement("Item0");

getJSONStructure(): []

Returns a JSON array of objects representing the current structure of the element. Ready to be persisted to LocalStorage.

Returns[]

Invoke the getJSONStructure method.

const dockinglayout = document.querySelector('smart-dockinglayout');
const result = dockinglayout.getJSONStructure(false);

loadState( state?: any[]): void

Loads a previously saved state of the element. If no state is provided as an argument the method will do a localStorage lookup.

Arguments

state?any[]

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


Invoke the loadState method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.loadState("state");

removeAt( index: number | HTMLElement | string): void

Removes a DockingLayout item (TabsWindow) from the element.

Arguments

indexnumber | HTMLElement | string

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


Invoke the removeAt method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.removeAt(2);

removeAll(): void

Removes all items from the element.


Invoke the removeAll method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.removeAll();

removeChild( node: Node): T

Arguments

nodeNode

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

ReturnsNode

saveState(): void

Saves the current state of the DockingLayout to LocalStorage. The state includes the hierarchy and size of the items.


Invoke the saveState method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.saveState(false);

undock( node: string | number | Node): void

The method undocks/removes an item from the Layout and places it at the same position but it's no more part of the layout. The item becomes an 'outher' item that can be reinserted at any time.

Arguments

nodestring | number | Node

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


Invoke the undock method.

const dockinglayout = document.querySelector('smart-dockinglayout');
dockinglayout.undock("tabsWindow");

update( index: number | HTMLElement | string, settings: any): void

Updates a TabsWindow and it's contents.

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.


Invoke the update method.

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

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.