Layout Javascript API

Example

Set the animation property.

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

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

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

 layout.animation = 'simple';

Get the animation property.

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

 let animation = layout.animation;

Example

Set the contextMenuDataSource property.

 <smart-layout context-menu-data-source='["delete", "update"]'></smart-layout>

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

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

 layout.contextMenuDataSource = [{ label: "delete", value: "delete" }, { label: "Update Item", value: "value" }];

Get the contextMenuDataSource property.

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

 let contextMenuDataSource = layout.contextMenuDataSource;

Example

Set the disabled property.

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

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

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

 layout.disabled = false;

Get the disabled property.

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

 let disabled = layout.disabled;

Example

Set the dataSource property.

 <smart-layout data-source='[object Object],[object Object]'></smart-layout>

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

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

 layout.dataSource = [object Object],[object Object],[object Object];

Get the dataSource property.

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

 let dataSource = layout.dataSource;

Example

Set the locale property.

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

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

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

 layout.locale = 'fr';

Get the locale property.

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

 let locale = layout.locale;

Example

Set the messages property.

 <smart-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}}.","invalidIndex":"{{elementType}}: '{{method}}' Methode akzeptiert einen Index der Typennummer.","indexOutOfBound":"{{elementType}}: Nicht gebundener Index / Indizes in Methode '{{method}}'.","invalidNode":"{{elementType}}: '{{method}}' Die Methode akzeptiert ein Objekt oder ein Array von Objekten als zweiten Parameter.","invalidType":"{{elementType}}: '{{propertyName}}' muss vom Typ string oder Nummer sein.", "delete":"L�schen", "noId":"{{elementType}}: Ben�tigt eine ID, um einen Zustand zu speichern / laden."}}'></smart-layout>

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

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

 layout.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}}.","invalidIndex":"{{elementType}}: '{{method}}' method accepts an index of type number.","invalidNode":"{{elementType}}: '{{method}}' method accepts an object or an array of objects as it's second parameter.","invalidSettings":"{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.", "delete":"Delete", "noId":"{{elementType}}: requires an id in order to save/load a state."}};

Get the messages property.

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

 let messages = layout.messages;

Example

Set the orientation property.

 <smart-layout orientation='horizontal'></smart-layout>

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

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

 layout.orientation = 'vertical';

Get the orientation property.

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

 let orientation = layout.orientation;

Example

Set the readonly property.

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

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

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

 layout.readonly = true;

Get the readonly property.

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

 let readonly = layout.readonly;

Example

Set the allowLiveSplit property.

 <smart-layout allow-live-split></smart-layout>

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

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

 layout.allowLiveSplit = true;

Get the allowLiveSplit property.

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

 let allowLiveSplit = layout.allowLiveSplit;

Example

Set the rightToLeft property.

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

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

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

 layout.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = layout.rightToLeft;

Example

Set the selectedIndex property.

 <smart-layout selected-index='0'></smart-layout>

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

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

 layout.selectedIndex = 0.1;

Get the selectedIndex property.

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

 let selectedIndex = layout.selectedIndex;

Example

Set the theme property.

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

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

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

 layout.theme = 'red';

Get the theme property.

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

 let theme = layout.theme;

Example

Set the unfocusable property.

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

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

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

 layout.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = layout.unfocusable;

Example

Set up the event handler of resize event.

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

Example

Set up the event handler of stateChange event.

const layout = document.querySelector('smart-layout');
layout.addEventListener('stateChange', function (event) {
    const detail = event.detail,
        item = detail.item,
        type = detail.type;

	// event handling code goes here.
})

Example

Set up the event handler of change event.

const layout = document.querySelector('smart-layout');
layout.addEventListener('change', function (event) {
    const detail = event.detail,
        oldSelectedIndex = detail.oldSelectedIndex,
        selectedIndex = detail.selectedIndex;

	// event handling code goes here.
})

Example

Set up the event handler of closing event.

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

Example

Set up the event handler of close event.

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

Example

Set up the event handler of opening event.

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

Example

Set up the event handler of open event.

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

Example

Set up the event handler of menuItemClick event.

const layout = document.querySelector('smart-layout');
layout.addEventListener('menuItemClick', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

Invoke the getItem method.

const layout = document.querySelector('smart-layout');
layout.getItem(1);

Invoke the refresh method.

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

Invoke the createLayoutItem method.

const layout = document.querySelector('smart-layout');
layout.createLayoutItem("newItem, 'top'","newItem, 'bottom'");

Invoke the moveChildren method.

const layout = document.querySelector('smart-layout');
layout.moveChildren("oldItem, newItem");