MultiSplitButton
Buttons group with DropDown and multiple action buttons.
Selector
smart-multi-split-button
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
buttonsDataSourcestring[]
Determines a data source used to generate element's permanently visible buttons.
dataSourceany
Determines the data source of the multi split button's dropdown.
Default value[]
disabledboolean
Enables or disables smartMultiSplitButton.
Default valuefalse
displayLoadingIndicatorboolean
Displays or hides the loading indicator
Default valuefalse
displayMemberstring
Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.
Default value"""
dropDownAppendToany
Sets the parent container of the button's dropDown list (the popup). Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown list.
dropDownButtonPositionDropDownButtonPosition
Determines position of the drop down button.
Default valueright
dropDownOpenModeDropDownOpenMode
Defines how element's drop down behaves. In 'none' mode drop down never opens. In 'dropDownButton' mode drop down is opened only via elelent's drop down button. In 'auto' mode drop down is opened on click on the whole top section.
Default valuedropDownButton
dropDownOverlayboolean
If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.
Default valuefalse
dropDownPositionDropDownPosition
Determines the vertical position of the dropDown list. 'Auto' means its automatically determined depending on the viewport size.
Default valueauto
filterableboolean
Determines whether the Filtering is enabled.
Default valuefalse
filterModeFilterMode
Determines the filtering for the drop down list mode.
Default valuestartsWithIgnoreCase
filterInputPlaceholderstring
Determines the placeholder for the drop down list filter input field.
Default value"
groupedboolean
If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.
Default valuefalse
groupMemberstring
Sets or gets the groupMember. If it's not set, by default is used 'group' property of the source object.
Default value"null
incrementalSearchDelaynumber
Sets ot gets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.
Default value700
incrementalSearchModeSearchMode
Sets ot gets the mode of the incremental search mode.
Default valuestartsWithIgnoreCase
itemHeightnumber | null
Determines the height of the items.
itemTemplateany
The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to load list items from the HTMLTemplateElement.
loadingIndicatorPlaceholderstring
Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
Default value"Loading...
loadingIndicatorPositionVerticalAlignment
The position of the loading indicator.
Default valuecenter
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."
}
openedboolean
Determines whether the popup is opened or closed
Default valuefalse
readonlyboolean
Disables user interaction with the element.
Default valuefalse
selectedIndexesnumber[]
Sets or gets selected indexes of buttons's dropDown.
selectedValuesstring[]
Sets or gets selected values of buttons's dropDown.
selectionModeMultiSplitButtonSelectionMode
Determines how many items can be selected.
Default valueone
sortedboolean
Determines whether the items in the dropDown are sorted alphabetically or not
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valueMemberstring
Determines the value member of an item. Stored as value in the item object.
Default value"""
virtualizedboolean
Determines weather or not Virtualization is used for the button's dropDownList.
Default valuefalse
onchange((this: Window, ev: Event) => any) | null
This event is triggered when button's dropDown selection is changed.
Arguments
evEvent
onclose((this: Window, ev: Event) => any) | null
This event is triggered when button's dropDown list is closed.
Arguments
evEvent
onclosing((this: Window, ev: Event) => any) | null
This event is triggered when button's dropDown list is closing.
Arguments
evEvent
onitemclick((this: Window, ev: Event) => any) | null
This event is triggered when user clicks any of the element's buttons or button's dropDown items.
Arguments
evEvent
onopen((this: Window, ev: Event) => any) | null
This event is triggered when button's dropDown list is opened.
Arguments
evEvent
onopening((this: Window, ev: Event) => any) | null
This event is triggered when button's dropDown list is opening.
Arguments
evEvent
onscrollbottomreached((this: Window, ev: Event) => any) | null
This event is triggered when user scrolls to the end of the dropDown list.
Arguments
evEvent
onscrolltopreached((this: Window, ev: Event) => any) | null
This event is triggered when user scrolls to the start of the dropDown list.
Arguments
evEvent
Methods
close(): void
Closes button's dropDown list.
getItem( value: string): HTMLElement
Returns an item instance occured in the element's drop down.
Arguments
valuestring
The value of an item from the drop down list or a button.
ReturnsHTMLElement
items(): any[]
Returns an array with the items from the split button's dropDown list.
Returnsany[]
insert( position: number, value: any): void
Inserts a new item at a specified position in the drop down list.
Arguments
positionnumber
The position where the item must be inserted.
valueany
The value of the new item.
open(): void
Opens the splitButton's dropDown list.
removeAt( position: number): void
Removes an item at a specified position in the drop down list.
Arguments
positionnumber
The position of the removed item.
update( position: number, value: any): void
Updates an item from the dropDown list.
Arguments
positionnumber
The position where the item must be updated.
valueany
The value of the updated item.