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'
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
falseExample
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
falseExample
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
dropDownButtonExample
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
falseExample
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
falseExample
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
falseExample
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
700Example
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
falseExample
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
falseExample
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
falseExample
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
falseExample
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
falseExample
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.