SelectButton

This is a button that contains a drop-down list of options.

DHX Select Button

Adding SelectButton

A new SelectButton can be created with the help of the add() method of Tree Collection:

ribbon.data.add({
    id:"select",
    type: "selectButton",
    value: "jpeg",
    size: "small",
    count: 20,
    items: [
        {
            value: "jpeg",
            hotkey: "alt+1"
        },
        {
            value: "pdf",
            hotkey: "alt+2"
        },
        {
            value: "png",
            hotkey: "alt+3"
        }
    ]
});

Related sample: Ribbon. Select Button

Attributes

The selectButton object has the following properties:

type	(string) the type of a control, set it to "selectButton". If not specified - the "navItem" type is applied by default.
id	(string) the id of a control, auto-generated if not set
parent	(string) the parent of the item
value	(string) the value of the button
css	(string\|string[]) adds style classes to a button
icon	(string) the name of an icon from the used icon font
items	(array) an array of nested controls. You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
size	(string) defines the size of a button: "small"\|"medium"\|"auto"
count	(number) a badge with a number
countColor	(string) the color of a badge with number: "danger" \| "secondary" \| "primary" \| "success"
tooltip	(string) a tooltip for the control
hidden	(boolean) defines whether a button is hidden
disabled	(boolean) defines whether a button is disabled

Operations with a button

You can perform operations over the SelectButton control with the help of the available Ribbon API and Tree Collection API.