MultiSplitButton — Smart UI JavaScript API

MultiSplitButton — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MultiSplitButton - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-multi-split-button id="demo-multisplitbutton"></smart-multi-split-button>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.multisplitbutton.js';

    const el = document.getElementById('demo-multisplitbutton');
    if (el) {

      el.buttonsDataSource = ['1', '2', '3'];
      el.dataSource = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Argentina'];
      el.selectedIndexes = [1];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: MultiSplitButton   Framework: JavaScript   Selector: smart-multi-split-button

API counts: 36 properties, 7 methods, 9 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: close(), getItem(), items(), insert(), open(), removeAt()

Common events: buttonClick, change, close, closing, itemClick, open

Module hint: smart-webcomponents/source/modules/smart.multisplitbutton.js

Buttons group with DropDown and multiple action buttons.

Class

MultiSplitButton

MultiSplitButton

Buttons group with DropDown and multiple action buttons.

Selector

smart-multi-split-button

Quick picks

changeclosedataSourcedisabledopen

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

animationSets 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."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"

Examples

Markup and runtime examples for animation:

HTML:

<smart-multi-split-button animation="none"></smart-multi-split-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

buttonsDataSourceSpecifies 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. string[]

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.

Try a demo showcasing the buttonsDataSource property.

Examples

Markup and runtime examples for buttonsDataSource:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dataSourceSpecifies 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.any

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

[]

Examples

Markup and runtime examples for dataSource:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

disabledControls 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.boolean

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

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

displayLoadingIndicatorControls 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.boolean

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

Examples

Markup and runtime examples for displayLoadingIndicator:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

displayMemberDefines 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.string

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

""""

Examples

Markup and runtime examples for displayMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownAppendToSpecifies 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.string

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"

Examples

Markup and runtime examples for dropDownAppendTo:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownButtonPositionSpecifies 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."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"
Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownOpenModeSpecifies 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."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

Examples

Markup and runtime examples for dropDownOpenMode:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownOverlayWhen 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.boolean

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

Examples

Markup and runtime examples for dropDownOverlay:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownPositionSpecifies 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."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"

Examples

Markup and runtime examples for dropDownPosition:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterableSpecifies 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.boolean

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

Examples

Markup and runtime examples for filterable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterInputPlaceholderSpecifies 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.string

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

""

Examples

Markup and runtime examples for filterInputPlaceholder:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterModeSpecifies 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."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"

Examples

Markup and runtime examples for filterMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

groupedWhen 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.boolean

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
Try a demo showcasing the grouped property.

Examples

Markup and runtime examples for grouped:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

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

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"
Try a demo showcasing the groupMember property.

Examples

Markup and runtime examples for groupMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

incrementalSearchDelayEnhances 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.number

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

Examples

Markup and runtime examples for incrementalSearchDelay:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

incrementalSearchModeGets or sets the current mode for incremental search, which determines how search input is processed as the user types."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"

Examples

Markup and runtime examples for incrementalSearchMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

itemHeightSpecifies 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.number | 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.

Examples

Markup and runtime examples for itemHeight:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

itemTemplateThe '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.any

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.

Examples

Markup and runtime examples for itemTemplate:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

loadingIndicatorPlaceholderSpecifies 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.string

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

Examples

Markup and runtime examples for loadingIndicatorPlaceholder:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

loadingIndicatorPositionSpecifies the on-screen location where the loading indicator will be displayed (e.g., top, bottom, center, or custom coordinates)."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"

Examples

Markup and runtime examples for loadingIndicatorPosition:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localeSpecifies 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.string

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"

Examples

Markup and runtime examples for locale:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localizeFormatFunctionCallback function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime.function | null

Callback function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

messagesDefines 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.object

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}}."

}

Examples

Markup and runtime examples for messages:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-split-button');
el.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}}."}};

Read the current value:

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

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

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

Examples

Markup and runtime examples for opened:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

readonlyPrevents 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.boolean

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

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectedIndexesGets 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. number[]

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.

Examples

Markup and runtime examples for selectedIndexes:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectedValuesGets 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. string[]

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.

Examples

Markup and runtime examples for selectedValues:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectionModeSpecifies 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."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"

Examples

Markup and runtime examples for selectionMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

sortedSpecifies 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.boolean

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

Examples

Markup and runtime examples for sorted:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

themeSpecifies 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.string

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

""

Examples

Markup and runtime examples for theme:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

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

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

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unlockKeySets 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.string

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

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

valueMemberSpecifies 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.string

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

""""

Examples

Markup and runtime examples for valueMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

virtualizedSpecifies 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.boolean

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

Examples

Markup and runtime examples for virtualized:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

Events

buttonClickThis event is triggered whenever the user clicks on the action button, allowing you to execute custom functionality in response to the user's interaction.CustomEvent

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.

Try a demo showcasing the buttonClick event.

Examples

Listen for buttonClick using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('buttonClick', (event) => {
	// event handling code goes here.
})

changeThis 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.CustomEvent

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.

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('change', (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.
})

closeThis 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.CustomEvent

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.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

closingThis 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.CustomEvent

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.

Examples

Listen for closing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

itemClickThis 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.CustomEvent

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.

Examples

Listen for itemClick using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('itemClick', (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.
})

openThis 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.CustomEvent

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.

Examples

Listen for open using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

openingThis 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.CustomEvent

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.

Examples

Listen for opening using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

scrollBottomReachedThis 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.CustomEvent

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.

Examples

Listen for scrollBottomReached using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('scrollBottomReached', (event) => {
	// event handling code goes here.
})

scrollTopReachedThis 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.CustomEvent

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.

Examples

Listen for scrollTopReached using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-split-button')?.addEventListener('scrollTopReached', (event) => {
	// event handling code goes here.
})

Methods

close(): voidCloses the dropdown list associated with the button, hiding its options from view.

Closes the dropdown list associated with the button, hiding its options from view.

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

document.querySelector('smart-multi-split-button')?.close();

getItem( value: string): HTMLElementReturns 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.

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

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

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

insert( position: number, value: any): voidInserts 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.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

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

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

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

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

open(): voidDisplays the drop-down list associated with the splitButton control, allowing users to view and select available options.

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

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

document.querySelector('smart-multi-split-button')?.open();

removeAt( position: number): voidRemoves 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.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

document.querySelector('smart-multi-split-button')?.removeAt("5");

update( position: number, value: any): voidUpdates 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.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-multisplitbutton, if you host multiple widgets):

document.querySelector('smart-multi-split-button')?.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.