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 retrieves the current animation mode for the component. When the property is set to 'none', all animations are disabled. For other supported values, the animation mode will determine how visual transitions are rendered.
BbuttonsDataSourceSpecifies the data source that provides the information required to generate the element’s permanently visible buttons. This property defines where and how the button data is retrieved, ensuring the buttons remain constantly displayed on the element.
DdataSourceSpecifies the data source from which the multi-split button's dropdown menu retrieves and displays its list of options. This setting defines what content appears in the dropdown and enables dynamic or static population of menu items.
DdisabledControls whether the smartMultiSplitButton component is active or inactive. When enabled, users can interact with the smartMultiSplitButton; when disabled, the component becomes non-interactive and appears visually inactive.
DdisplayLoadingIndicatorControls the visibility of the loading indicator, showing it when active and hiding it when not needed. This allows users to receive visual feedback during content loading or processing operations.
DdisplayMemberDefines or retrieves the displayMember property, which determines the name of the object property to display in the UI. When binding a data collection using the dataSource property, displayMember specifies which property of each data object should be shown to the user. For example, if dataSource is an array of user objects, setting displayMember to "name" will display the value of the "name" property for each user in the collection.
DdropDownAppendToSpecifies the parent container element for the button’s dropdown list (popup). Accepts a CSS selector, an element ID, or the literal value 'body' as the target container. Use this option when a CSS property from an ancestor element is affecting the visibility or display of the dropdown list. By setting the parent container, you can control where the dropdown is rendered in the DOM, helping to resolve issues with overflow, clipping, or z-index caused by parent elements.
DdropDownButtonPositionSpecifies the location where the dropdown button will be displayed relative to its parent element. Possible values may include options such as "left," "right," "top," or "bottom," allowing you to control the alignment and placement of the dropdown button within the user interface.
DdropDownOpenModeSpecifies the behavior of the element's drop-down functionality. - In 'none' mode, the drop-down will never open, regardless of any user interaction. - In 'dropDownButton' mode, the drop-down opens only when the dedicated drop-down button on the element is clicked; clicking other parts of the element will have no effect. - In 'auto' mode, the drop-down opens when any area of the element's top section is clicked, not just the button—providing a more flexible and user-friendly experience.
DdropDownOverlayWhen this property is enabled, opening the element’s dropdown will render a transparent overlay layer between the dropdown menu and the rest of the page content. This overlay visually separates the dropdown from the background and can help intercept clicks outside the dropdown to close it or prevent interaction with other elements while the dropdown is open.
DdropDownPositionSpecifies the vertical placement of the drop-down list relative to its trigger element. When set to 'auto', the component dynamically chooses whether to display the drop-down above or below the trigger based on available space within the viewport, ensuring that the list remains fully visible without overflow.
FfilterableSpecifies whether the filtering feature is currently active. When set to true, filtering is enabled and data will be filtered according to the specified criteria; when false, all data is shown without applying any filters.
FfilterModeSpecifies the filtering behavior applied to the dropdown list when users type or search. This property controls how the available options are filtered and displayed, such as matching items that contain, start with, or exactly match the user's input.
FfilterInputPlaceholderSpecifies the placeholder text that appears inside the dropdown list's filter input field, providing guidance or example input to help users understand what they can type to filter the list options.
GgroupedWhen enabled, this setting organizes items into groups based on the first letter of each item's value. Note: This option cannot be used if your dataSource is already grouped, as it only applies to flat (ungrouped) collections.
GgroupMemberGets or sets the groupMember property. If groupMember is not explicitly set, it defaults to using the value of the source object's group property.
IincrementalSearchDelayEnhances or retrieves the value of the incrementalSearchDelay property. This property defines the time interval, in milliseconds, that must pass after the user stops typing before the previous search string is cleared. The countdown begins as soon as the user ceases typing, ensuring that only periods of inactivity longer than the specified delay will reset the search input.
IincrementalSearchModeGets or sets the current mode for incremental search, which determines how search input is processed as the user types.
IitemHeightSpecifies the vertical dimension (height) of each item, in pixels or another defined unit. This property controls how tall each item appears within the component, affecting layout and spacing.
IitemTemplateThe 'itemTemplate' property is a string that specifies the 'id' attribute of an 'HTMLTemplateElement' present in the DOM. This property is used to reference the corresponding template when generating list items, allowing the application to clone and insert the template’s content for each item in the list dynamically. By using an 'HTMLTemplateElement', you can define the structure and layout of individual list items in a reusable, maintainable way.
LloadingIndicatorPlaceholderSpecifies the text to be shown alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides context or feedback to users during loading states.
LloadingIndicatorPositionSpecifies the on-screen location where the loading indicator will be displayed (e.g., top, bottom, center, or custom coordinates).
UunlockKeySets or retrieves the unlockKey property, a unique key required to unlock access to the product’s features or content. Use this to programmatically provide or verify the unlock key during authentication or activation processes.
LlocaleSpecifies or retrieves the current language code (e.g., "en", "fr", "es") for localization. This property works together with messages, ensuring the appropriate language-specific messages are displayed or retrieved based on the selected language.
LlocalizeFormatFunctionCallback function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime.
MmessagesDefines or retrieves an object containing customizable strings and messages displayed by the widget, enabling support for localization and internationalization. This property works together with the language setting to provide appropriate translations based on the user's selected language. Use this object to specify translations for all widget text elements.
OopenedSpecifies whether the popup is currently visible (open) or hidden (closed) on the screen. This property controls the display state of the popup component.
RreadonlyPrevents users from interacting with the element, disabling all input events such as clicks, typing, or form submissions. The element remains visible, but users cannot select, activate, or modify it in any way.
SselectedIndexesGets or sets the selected indexes of items within the button's dropdown menu. This property allows you to programmatically retrieve or update which items in the dropdown are currently selected.
SselectedValuesGets or sets the selected values in the button's drop-down menu. This property allows you to retrieve the currently selected options or specify which options should be selected within the drop-down associated with the button.
SselectionModeSpecifies the maximum number of items a user is allowed to select. If set to 1, only single selection is permitted; higher values enable multiple selections up to the defined limit.
SsortedSpecifies whether the items displayed in the dropdown menu are automatically sorted in alphabetical order. If enabled, all dropdown items will appear in alphabetical sequence; if disabled, items will retain their original order as provided.
TthemeSpecifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, backgrounds, and other visual properties. This setting allows for consistent visual presentation across the application or component.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via keyboard navigation (such as the Tab key).
VvalueMemberSpecifies the property of the item object that holds its unique value. This property is used to retrieve or assign the item's value, which is typically leveraged for data binding, form submission, or identifying items within a collection. The value is stored in the specified key of the item object.
VvirtualizedSpecifies whether virtualization is enabled for the button’s drop-down list. When set to true, virtualization improves performance by only rendering items visible in the viewport, which is useful for large datasets. When set to false, all items are rendered regardless of visibility.

Events

BbuttonClickThis event is triggered whenever the user clicks on the action button, allowing you to execute custom functionality in response to the user's interaction.
CchangeThis event fires whenever the user modifies the current selection, such as when they highlight different text or select a new item from a list. It is triggered immediately after the selection change occurs, allowing developers to respond dynamically to user selection actions.
CcloseThis event is triggered when the drop-down list associated with the button is closed, either by user interaction or programmatically. It allows you to perform actions or execute logic after the drop-down menu has been dismissed.
CclosingThis event is triggered when the dropdown list associated with the button begins to close, either due to user interaction or programmatic actions. It allows you to execute custom logic just before the dropdown is fully closed.
IitemClickThis event is triggered whenever a user clicks on an individual item, allowing you to execute custom logic in response to item selection. The event provides details about the clicked item, such as its identifier or associated data, which can be used for further processing or navigation.
OopenThis event is triggered whenever the drop-down list of the button is opened, either by a user action such as clicking or by programmatic interaction. It allows you to perform custom actions or update the UI in response to the drop-down list becoming visible.
OopeningThis event is triggered just before the button's dropdown list becomes visible, allowing you to perform actions or modify the dropdown content as it is about to open.
SscrollBottomReachedThis event is triggered when the user reaches the bottom of the drop-down list by scrolling, indicating that all available list items have been viewed. This can be used to implement features such as lazy loading or dynamic data fetching when additional items need to be loaded into the drop-down.
SscrollTopReachedThis event is triggered when the user scrolls to the very top (the first item) of the drop-down list. It can be used to detect when the user has reached the beginning of the list, for actions such as loading more items or updating the UI accordingly.

Methods

CcloseCloses the dropdown list associated with the button, hiding its options from view.
GgetItemReturns an instance of the item that appears in the element’s dropdown menu. This instance represents the selected item from the dropdown list, allowing access to its properties and methods.
IitemsReturns an array containing all items currently present in the dropdown list of the split button component. Each array element represents an individual dropdown item, allowing you to access or manipulate the complete set of options available in the split button's dropdown.
IinsertInserts a new item into the dropdown list at the specified index, shifting existing items as needed. The new item will appear at the given position within the list, and subsequent items will be moved down to accommodate it.
OopenDisplays the drop-down list associated with the splitButton control, allowing users to view and select available options.
RremoveAtRemoves an item located at the specified index from the drop-down list, updating the list to exclude the removed item and adjusting the positions of subsequent items accordingly.
UupdateUpdates a specific item within the drop-down list by modifying its properties or replacing its value with new data. This operation allows you to dynamically change the content displayed for a selected option in the drop-down menu.

Properties

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

Sets or retrieves the current animation mode for the component. When the property is set to 'none', all animations are disabled. For other supported values, the animation mode will determine how visual transitions are rendered.

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

Specifies the data source that provides the information required to generate the element’s permanently visible buttons. This property defines where and how the button data is retrieved, ensuring the buttons remain constantly displayed on the element.

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

Specifies the data source from which the multi-split button's dropdown menu retrieves and displays its list of options. This setting defines what content appears in the dropdown and enables dynamic or static population of menu items.

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

Controls whether the smartMultiSplitButton component is active or inactive. When enabled, users can interact with the smartMultiSplitButton; when disabled, the component becomes non-interactive and appears visually inactive.

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

Controls the visibility of the loading indicator, showing it when active and hiding it when not needed. This allows users to receive visual feedback during content loading or processing operations.

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

Defines or retrieves the displayMember property, which determines the name of the object property to display in the UI. When binding a data collection using the dataSource property, displayMember specifies which property of each data object should be shown to the user. For example, if dataSource is an array of user objects, setting displayMember to "name" will display the value of the "name" property for each user in the collection.

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

Specifies the parent container element for the button’s dropdown list (popup). Accepts a CSS selector, an element ID, or the literal value 'body' as the target container. Use this option when a CSS property from an ancestor element is affecting the visibility or display of the dropdown list. By setting the parent container, you can control where the dropdown is rendered in the DOM, helping to resolve issues with overflow, clipping, or z-index caused by parent elements.

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"

Specifies the location where the dropdown button will be displayed relative to its parent element. Possible values may include options such as "left," "right," "top," or "bottom," allowing you to control the alignment and placement of the dropdown button within the user interface.

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"

Specifies the behavior of the element's drop-down functionality.
- In 'none' mode, the drop-down will never open, regardless of any user interaction.
- In 'dropDownButton' mode, the drop-down opens only when the dedicated drop-down button on the element is clicked; clicking other parts of the element will have no effect.
- In 'auto' mode, the drop-down opens when any area of the element's top section is clicked, not just the button—providing a more flexible and user-friendly experience.

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

When this property is enabled, opening the element’s dropdown will render a transparent overlay layer between the dropdown menu and the rest of the page content. This overlay visually separates the dropdown from the background and can help intercept clicks outside the dropdown to close it or prevent interaction with other elements while the dropdown is open.

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"

Specifies the vertical placement of the drop-down list relative to its trigger element. When set to 'auto', the component dynamically chooses whether to display the drop-down above or below the trigger based on available space within the viewport, ensuring that the list remains fully visible without overflow.

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

Specifies whether the filtering feature is currently active. When set to true, filtering is enabled and data will be filtered according to the specified criteria; when false, all data is shown without applying any filters.

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"

Specifies the filtering behavior applied to the dropdown list when users type or search. This property controls how the available options are filtered and displayed, such as matching items that contain, start with, or exactly match the user's input.

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

Specifies the placeholder text that appears inside the dropdown list's filter input field, providing guidance or example input to help users understand what they can type to filter the list options.

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

When enabled, this setting organizes items into groups based on the first letter of each item's value. Note: This option cannot be used if your dataSource is already grouped, as it only applies to flat (ungrouped) collections.

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

Gets or sets the groupMember property. If groupMember is not explicitly set, it defaults to using the value of the source object's group property.

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

Enhances or retrieves the value of the incrementalSearchDelay property. This property defines the time interval, in milliseconds, that must pass after the user stops typing before the previous search string is cleared. The countdown begins as soon as the user ceases typing, ensuring that only periods of inactivity longer than the specified delay will reset the search input.

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"

Gets or sets the current mode for incremental search, which determines how search input is processed as the user types.

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

Specifies the vertical dimension (height) of each item, in pixels or another defined unit. This property controls how tall each item appears within the component, affecting layout and spacing.

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 specifies the 'id' attribute of an 'HTMLTemplateElement' present in the DOM. This property is used to reference the corresponding template when generating list items, allowing the application to clone and insert the template’s content for each item in the list dynamically. By using an 'HTMLTemplateElement', you can define the structure and layout of individual list items in a reusable, maintainable way.

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

Specifies the text to be shown alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides context or feedback to users during loading states.

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"

Specifies the on-screen location where the loading indicator will be displayed (e.g., top, bottom, center, or custom coordinates).

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;

unlockKeystring

Sets or retrieves the unlockKey property, a unique key required to unlock access to the product’s features or content. Use this to programmatically provide or verify the unlock key during authentication or activation processes.

Default value

""

Example

Set the unlockKey property. 

 <smart-multi-split-button unlock-key=''></smart-multi-split-button>

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

 const multisplitbutton = document.querySelector('smart-multi-split-button');
 multisplitbutton.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

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

localestring

Specifies or retrieves the current language code (e.g., "en", "fr", "es") for localization. This property works together with messages, ensuring the appropriate language-specific messages are displayed or retrieved based on the selected language.

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 function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime.

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

Defines or retrieves an object containing customizable strings and messages displayed by the widget, enabling support for localization and internationalization. This property works together with the language setting to provide appropriate translations based on the user's selected language. Use this object to specify translations for all widget text elements.

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

Specifies whether the popup is currently visible (open) or hidden (closed) on the screen. This property controls the display state of the popup component.

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

Prevents users from interacting with the element, disabling all input events such as clicks, typing, or form submissions. The element remains visible, but users cannot select, activate, or modify it in any way.

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

Gets or sets the selected indexes of items within the button's dropdown menu. This property allows you to programmatically retrieve or update which items in the dropdown are currently selected.

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

Gets or sets the selected values in the button's drop-down menu. This property allows you to retrieve the currently selected options or specify which options should be selected within the drop-down associated with the button.

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"

Specifies the maximum number of items a user is allowed to select. If set to 1, only single selection is permitted; higher values enable multiple selections up to the defined limit.

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

Specifies whether the items displayed in the dropdown menu are automatically sorted in alphabetical order. If enabled, all dropdown items will appear in alphabetical sequence; if disabled, items will retain their original order as provided.

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

Specifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, backgrounds, and other visual properties. This setting allows for consistent visual presentation across the application or component.

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

When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via keyboard navigation (such as the Tab key).

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

Specifies the property of the item object that holds its unique value. This property is used to retrieve or assign the item's value, which is typically leveraged for data binding, form submission, or identifying items within a collection. The value is stored in the specified key of 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

Specifies whether virtualization is enabled for the button’s drop-down list. When set to true, virtualization improves performance by only rendering items visible in the viewport, which is useful for large datasets. When set to false, all items are rendered regardless of visibility.

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 whenever the user clicks on the action button, allowing you to execute custom functionality in response to the user's interaction.

  • 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 fires whenever the user modifies the current selection, such as when they highlight different text or select a new item from a list. It is triggered immediately after the selection change occurs, allowing developers to respond dynamically to user selection actions.

  • 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 the drop-down list associated with the button is closed, either by user interaction or programmatically. It allows you to perform actions or execute logic after the drop-down menu has been dismissed.

  • 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 the dropdown list associated with the button begins to close, either due to user interaction or programmatic actions. It allows you to execute custom logic just before the dropdown is fully closed.

  • 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 whenever a user clicks on an individual item, allowing you to execute custom logic in response to item selection. The event provides details about the clicked item, such as its identifier or associated data, which can be used for further processing or navigation.

  • 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 whenever the drop-down list of the button is opened, either by a user action such as clicking or by programmatic interaction. It allows you to perform custom actions or update the UI in response to the drop-down list becoming visible.

  • 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 just before the button's dropdown list becomes visible, allowing you to perform actions or modify the dropdown content as it is about to open.

  • 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 the user reaches the bottom of the drop-down list by scrolling, indicating that all available list items have been viewed. This can be used to implement features such as lazy loading or dynamic data fetching when additional items need to be loaded into the drop-down.

  • 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 the user scrolls to the very top (the first item) of the drop-down list. It can be used to detect when the user has reached the beginning of the list, for actions such as loading more items or updating the UI accordingly.

  • 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 the dropdown list associated with the button, hiding its options from view.


Invoke the close method.

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

getItem( value: string): HTMLElement

Returns an instance of the item that appears in the element’s dropdown menu. This instance represents the selected item from the dropdown list, allowing access to its properties and methods.

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 containing all items currently present in the dropdown list of the split button component. Each array element represents an individual dropdown item, allowing you to access or manipulate the complete set of options available in the split button's dropdown.

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 into the dropdown list at the specified index, shifting existing items as needed. The new item will appear at the given position within the list, and subsequent items will be moved down to accommodate it.

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

Displays the drop-down list associated with the splitButton control, allowing users to view and select available options.


Invoke the open method.

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

removeAt( position: number): void

Removes an item located at the specified index from the drop-down list, updating the list to exclude the removed item and adjusting the positions of subsequent items accordingly.

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 a specific item within the drop-down list by modifying its properties or replacing its value with new data. This operation allows you to dynamically change the content displayed for a selected option in the drop-down menu.

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.