MultiSplitButton JAVASCRIPT UI Component API

MultiSplitButton Javascript API

Class

MultiSplitButton

MultiSplitButton

Buttons group with DropDown and multiple action buttons.

Selector

smart-multi-split-button

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
BbuttonsDataSourceDetermines a data source used to generate element's permanently visible buttons.
DdataSourceDetermines the data source of the multi split button's dropdown.
DdisabledEnables or disables smartMultiSplitButton.
DdisplayLoadingIndicatorDisplays or hides the loading indicator
DdisplayMemberSets 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.
DdropDownAppendToSets the parent container of the button's dropDown list (the popup). The expected value is CSS Selector, ID or 'body'. Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown list.
DdropDownButtonPositionDetermines position of the drop down button.
DdropDownOpenModeDefines 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.
DdropDownOverlayIf 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.
DdropDownPositionDetermines the vertical position of the dropDown list. 'Auto' means its automatically determined depending on the viewport size.
FfilterableDetermines whether the Filtering is enabled.
FfilterModeDetermines the filtering for the drop down list mode.
FfilterInputPlaceholderDetermines the placeholder for the drop down list filter input field.
GgroupedIf enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.
GgroupMemberSets or gets the groupMember. If it's not set, by default is used 'group' property of the source object.
IincrementalSearchDelaySets 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.
IincrementalSearchModeSets ot gets the mode of the incremental search mode.
IitemHeightDetermines the height of the items.
IitemTemplateThe 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.
LloadingIndicatorPlaceholderDetermines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LloadingIndicatorPositionThe position of the loading indicator.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback, related to localization module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
OopenedDetermines whether the popup is opened or closed
RreadonlyDisables user interaction with the element.
SselectedIndexesSets or gets selected indexes of buttons's dropDown.
SselectedValuesSets or gets selected values of buttons's dropDown.
SselectionModeDetermines how many items can be selected.
SsortedDetermines whether the items in the dropDown are sorted alphabetically or not
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
VvalueMemberDetermines the value member of an item. Stored as value in the item object.
VvirtualizedDetermines weather or not Virtualization is used for the button's dropDownList.

Events

BbuttonClickThis event is triggered when action button is clicked.
CchangeThis event is triggered when the selection is changed.
CcloseThis event is triggered when button's dropDown list is closed.
CclosingThis event is triggered when button's dropDown list is closing.
IitemClickThis event is triggered when an item is clicked.
OopenThis event is triggered when button's dropDown list is opened.
OopeningThis event is triggered when button's dropDown list is opening.
SscrollBottomReachedThis event is triggered when user scrolls to the end of the dropDown list.
SscrollTopReachedThis event is triggered when user scrolls to the start of the dropDown list.

Methods

CcloseCloses button's dropDown list.
GgetItemReturns an item instance occured in the element's drop down.
IitemsReturns an array with the items from the split button's dropDown list.
IinsertInserts a new item at a specified position in the drop down list.
OopenOpens the splitButton's dropDown list.
RremoveAtRemoves an item at a specified position in the drop down list.
UupdateUpdates an item from the dropDown list.

Properties

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

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

Allowed Values

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

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;

dropDownAppendTostring

Sets the parent container of the button's dropDown list (the popup). The expected value is CSS Selector, ID or 'body'. Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown list.

Default value

"null"

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.

Allowed Values

  • "contains" - displays only items with labels that contain the filter string (case sensitive)
  • "containsIgnoreCase" - displays only items with labels that contain the filter string (case insensitive)
  • "doesNotContain" - displays only items with labels that do not contain the filter string (case sensitive)
  • "doesNotContainIgnoreCase" - displays only items with labels that do not contain the filter string (case insensitive)
  • "equals" - displays only items with labels that equal the filter string (case sensitive)
  • "equalsIgnoreCase" - displays only items with labels that equal the filter string (case insensitive)
  • "startsWith" - displays only items with labels that start with the filter string (case sensitive)
  • "startsWithIgnoreCase" - displays only items with labels that start with the filter string (case insensitive)
  • "endsWith" - displays only items with labels that end with the filter string (case sensitive)
  • "endsWithIgnoreCase" - displays only items with labels that end with the filter string (case insensitive)

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.

Allowed Values

  • "contains" - displays only items with labels that contain the entered value (case sensitive)
  • "containsIgnoreCase" - displays only items with labels that contain the entered value (case insensitive)
  • "doesNotContain" - displays only items with labels that do not contain the entered value (case sensitive)
  • "doesNotContainIgnoreCase" - displays only items with labels that do not contain the entered value (case insensitive)
  • "equals" - displays only items with labels that equal the entered value (case sensitive)
  • "equalsIgnoreCase" - displays only items with labels that equal the entered value (case insensitive)
  • "startsWith" - displays only items with labels that start with the entered value (case sensitive)
  • "startsWithIgnoreCase" - displays only items with labels that start with the entered value (case insensitive)
  • "endsWith" - displays only items with labels that end with the entered value (case sensitive)
  • "endsWithIgnoreCase" - displays only items with labels that end with the entered value (case insensitive)

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

buttonClickCustomEvent

This event is triggered when action button is clicked.

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

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

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

changeCustomEvent

This event is triggered when the selection is changed.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.addedItems - An array of List items that have been selected.
ev.detail.disabled - A flag indicating whether or not the item that caused the change event is disabled.
ev.detail.index - The index of the List item that triggered the event.
ev.detail.label - The label of the List item that triggered the event.
ev.detail.removedItems - An array of List items that have been unselected before the event was fired.
ev.detail.selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
ev.detail.value - The value of the List item that triggered the event.

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) {
    const detail = event.detail,
        addedItems = detail.addedItems,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        removedItems = detail.removedItems,
        selected = detail.selected,
        value = detail.value;

	// 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 an item is clicked.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.disabled - Indicates whether the List item that was clicked is disabled or not.
ev.detail.index - Indicates the index of the List item that was clicked.
ev.detail.label - The label of the List item that was clicked.
ev.detail.selected - Indicates whether the List item that was clicked is selected or not.
ev.detail.value - The value of the List item that was clicked.

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) {
    const detail = event.detail,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        selected = detail.selected,
        value = detail.value;

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