MultiSplitButton JAVASCRIPT UI Component API

MultiSplitButton Javascript API

Class

MultiSplitButton

Buttons group with DropDown and multiple action buttons.

Selector

smart-multi-split-button

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-multi-split-button animation='none'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.animation = 'simple';

Get the animation property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let animation = multisplitbutton.animation;

buttonsDataSourcestring[]

Determines a data source used to generate element's permanently visible buttons.

Example

Set the buttonsDataSource property.

 <smart-multi-split-button buttons-data-source='['1', '2', '3']'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.buttonsDataSource = ['Afganistan', 'Albania', 'Algeria'];

Get the buttonsDataSource property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let buttonsDataSource = multisplitbutton.buttonsDataSource;

dataSourceany

Determines the data source of the multi split button's dropdown.

Default value

[]

Example

Set the dataSource property.

 <smart-multi-split-button data-source='["item 1", "item 2"]'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dataSource = multisplitbutton.dataSource;

disabledboolean

Enables or disables smartMultiSplitButton.

Default value

false

Example

Set the disabled property.

 <smart-multi-split-button disabled></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.disabled = false;

Get the disabled property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let disabled = multisplitbutton.disabled;

displayLoadingIndicatorboolean

Displays or hides the loading indicator

Default value

false

Example

Set the displayLoadingIndicator property.

 <smart-multi-split-button display-loading-indicator></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let displayLoadingIndicator = multisplitbutton.displayLoadingIndicator;

displayMemberstring

Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.

Default value

""""

Example

Set the displayMember property.

 <smart-multi-split-button display-member='label'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.displayMember = 'name';

Get the displayMember property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let displayMember = multisplitbutton.displayMember;

dropDownAppendToany

Sets the parent container of the button's dropDown list (the popup). Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown list.

Example

Set the dropDownAppendTo property.

 <smart-multi-split-button drop-down-append-to='body'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dropDownAppendTo = null;

Get the dropDownAppendTo property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dropDownAppendTo = multisplitbutton.dropDownAppendTo;

dropDownButtonPosition"none" | "left" | "right"

Determines position of the drop down button.

Default value

"right"

Example

Set the dropDownButtonPosition property.

 <smart-multi-split-button drop-down-button-position='none'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dropDownButtonPosition = 'left';

Get the dropDownButtonPosition property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dropDownButtonPosition = multisplitbutton.dropDownButtonPosition;

dropDownOpenMode"none" | "dropDownButton" | "auto"

Defines how element's drop down behaves. In 'none' mode drop down never opens. In 'dropDownButton' mode drop down is opened only via elelent's drop down button. In 'auto' mode drop down is opened on click on the whole top section.

Default value

dropDownButton

Example

Set the dropDownOpenMode property.

 <smart-multi-split-button drop-down-open-mode></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dropDownOpenMode = auto;

Get the dropDownOpenMode property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dropDownOpenMode = multisplitbutton.dropDownOpenMode;

dropDownOverlayboolean

If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.

Default value

false

Example

Set the dropDownOverlay property.

 <smart-multi-split-button drop-down-overlay></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dropDownOverlay = false;

Get the dropDownOverlay property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dropDownOverlay = multisplitbutton.dropDownOverlay;

dropDownPosition"auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

Determines the vertical position of the dropDown list. 'Auto' means its automatically determined depending on the viewport size.

Default value

"auto"

Example

Set the dropDownPosition property.

 <smart-multi-split-button drop-down-position='top'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.dropDownPosition = 'bottom';

Get the dropDownPosition property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let dropDownPosition = multisplitbutton.dropDownPosition;

filterableboolean

Determines whether the Filtering is enabled.

Default value

false

Example

Set the filterable property.

 <smart-multi-split-button filterable></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.filterable = false;

Get the filterable property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let filterable = multisplitbutton.filterable;

filterMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Determines the filtering for the drop down list mode.

Default value

"startsWithIgnoreCase"

Example

Set the filterMode property.

 <smart-multi-split-button filter-mode='contains'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.filterMode = 'equals';

Get the filterMode property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let filterMode = multisplitbutton.filterMode;

filterInputPlaceholderstring

Determines the placeholder for the drop down list filter input field.

Default value

""

Example

Set the filterInputPlaceholder property.

 <smart-multi-split-button filter-input-placeholder='Enter a value:'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let filterInputPlaceholder = multisplitbutton.filterInputPlaceholder;

groupedboolean

If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.

Default value

false

Example

Set the grouped property.

 <smart-multi-split-button grouped></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.grouped = false;

Get the grouped property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let grouped = multisplitbutton.grouped;

groupMemberstring

Sets or gets the groupMember. If it's not set, by default is used 'group' property of the source object.

Default value

"null"

Example

Set the groupMember property.

 <smart-multi-split-button group-member='group'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.groupMember = 'section';

Get the groupMember property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let groupMember = multisplitbutton.groupMember;

incrementalSearchDelaynumber

Sets ot gets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.

Default value

700

Example

Set the incrementalSearchDelay property.

 <smart-multi-split-button incremental-search-delay='100'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.incrementalSearchDelay = 500;

Get the incrementalSearchDelay property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let incrementalSearchDelay = multisplitbutton.incrementalSearchDelay;

incrementalSearchMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Sets ot gets the mode of the incremental search mode.

Default value

"startsWithIgnoreCase"

Example

Set the incrementalSearchMode property.

 <smart-multi-split-button incremental-search-mode='contains'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let incrementalSearchMode = multisplitbutton.incrementalSearchMode;

itemHeightnumber | null

Determines the height of the items.

Example

Set the itemHeight property.

 <smart-multi-split-button item-height='20'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.itemHeight = 200;

Get the itemHeight property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let itemHeight = multisplitbutton.itemHeight;

itemTemplateany

The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to load list items from the HTMLTemplateElement.

Example

Set the itemTemplate property.

 <smart-multi-split-button item-template='templateA'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.itemTemplate = templateB;

Get the itemTemplate property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let itemTemplate = multisplitbutton.itemTemplate;

loadingIndicatorPlaceholderstring

Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.

Default value

"Loading..."

Example

Set the loadingIndicatorPlaceholder property.

 <smart-multi-split-button loading-indicator-placeholder='Incoming data'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let loadingIndicatorPlaceholder = multisplitbutton.loadingIndicatorPlaceholder;

loadingIndicatorPosition"bottom" | "center" | "top"

The position of the loading indicator.

Default value

"center"

Example

Set the loadingIndicatorPosition property.

 <smart-multi-split-button loading-indicator-position='bottom'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let loadingIndicatorPosition = multisplitbutton.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-multi-split-button locale='de'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.locale = 'fr';

Get the locale property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let locale = multisplitbutton.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

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

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let localizeFormatFunction = multisplitbutton.localizeFormatFunction;

messagesobject

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

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}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property.

 <smart-multi-split-button 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}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.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}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let messages = multisplitbutton.messages;

openedboolean

Determines whether the popup is opened or closed

Default value

false

Example

Set the opened property.

 <smart-multi-split-button opened></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.opened = false;

Get the opened property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let opened = multisplitbutton.opened;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property.

 <smart-multi-split-button readonly></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.readonly = false;

Get the readonly property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let readonly = multisplitbutton.readonly;

selectedIndexesnumber[]

Sets or gets selected indexes of buttons's dropDown.

Example

Set the selectedIndexes property.

 <smart-multi-split-button selected-indexes='[1,2,3]'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.selectedIndexes = [4,5,6];

Get the selectedIndexes property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let selectedIndexes = multisplitbutton.selectedIndexes;

selectedValuesstring[]

Sets or gets selected values of buttons's dropDown.

Example

Set the selectedValues property.

 <smart-multi-split-button selected-values='["item 1"]'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.selectedValues = ["item 2"];

Get the selectedValues property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let selectedValues = multisplitbutton.selectedValues;

selectionMode"none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Determines how many items can be selected.

Default value

"one"

Example

Set the selectionMode property.

 <smart-multi-split-button selection-mode='oneOrMany'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.selectionMode = 'zeroOrOne';

Get the selectionMode property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let selectionMode = multisplitbutton.selectionMode;

sortedboolean

Determines whether the items in the dropDown are sorted alphabetically or not

Default value

false

Example

Set the sorted property.

 <smart-multi-split-button sorted></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.sorted = false;

Get the sorted property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let sorted = multisplitbutton.sorted;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

 <smart-multi-split-button theme='blue'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.theme = 'red';

Get the theme property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let theme = multisplitbutton.theme;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-multi-split-button unfocusable></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.unfocusable = false;

Get the unfocusable property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let unfocusable = multisplitbutton.unfocusable;

valueMemberstring

Determines the value member of an item. Stored as value in the item object.

Default value

""""

Example

Set the valueMember property.

 <smart-multi-split-button value-member='value'></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.valueMember = 'newValue';

Get the valueMember property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let valueMember = multisplitbutton.valueMember;

virtualizedboolean

Determines weather or not Virtualization is used for the button's dropDownList.

Default value

false

Example

Set the virtualized property.

 <smart-multi-split-button virtualized></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.virtualized = false;

Get the virtualized property.

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 let virtualized = multisplitbutton.virtualized;

Events

changeCustomEvent

This event is triggered when button's dropDown selection is changed.

  • 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 multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('change', function (event) {
	// event handling code goes here.
})

closeCustomEvent

This event is triggered when button's dropDown list 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 multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered when button's dropDown list is closing.

  • 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 multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('closing', function (event) {
	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered when user clicks any of the element's buttons or button's dropDown items.

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

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 itemClick event.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('itemClick', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when button's dropDown list is opened.

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

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 open event.

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

openingCustomEvent

This event is triggered when button's dropDown list is opening.

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

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 opening event.

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

scrollBottomReachedCustomEvent

This event is triggered when user scrolls to the end of the dropDown list.

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

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 scrollBottomReached event.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

scrollTopReachedCustomEvent

This event is triggered when user scrolls to the start of the dropDown list.

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

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 scrollTopReached event.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

Methods

close(): void

Closes button's dropDown list.


Invoke the close method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.close();

getItem( value: string): HTMLElement

Returns an item instance occured in the element's drop down.

Arguments

valuestring

The value of an item from the drop down list or a button.

ReturnsHTMLElement

Invoke the getItem method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
const result = multisplitbutton.getItem("First");

items(): []

Returns an array with the items from the split button's dropDown list.

Returns[]

Invoke the items method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
const result = multisplitbutton.items();

insert( position: number, value: any): void

Inserts a new item at a specified position in the drop down list.

Arguments

positionnumber

The position where the item must be inserted.

valueany

The value of the new item.


Invoke the insert method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.insert("5, \"New item\"");

open(): void

Opens the splitButton's dropDown list.


Invoke the open method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.open();

removeAt( position: number): void

Removes an item at a specified position in the drop down list.

Arguments

positionnumber

The position of the removed item.


Invoke the removeAt method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.removeAt("5");

update( position: number, value: any): void

Updates an item from the dropDown list.

Arguments

positionnumber

The position where the item must be updated.

valueany

The value of the updated item.


Invoke the update method.

const multisplitbutton = document.querySelector('smart-multi-split-button');
multisplitbutton.update("5, \"Updated item\", true");

CSS Variables

--smart-multi-split-button-default-widthvar()

Default value

"var(--smart-editor-width)"

Element's default width.

--smart-multi-split-button-default-heightvar()

Default value

"var(--smart-editor-height)"

Element's default height.