Button

This is a simple button that can have an icon. Button can have two states and a badge with a number, which can be useful for displaying the number of new messages, etc.

Adding Button

A button can be easily added to a toolbar with the help of the add() method of Tree Collection:

toolbar.data.add({
    type:"button", value:"Best button"
});

Attributes

You can provide the following attributes in the configuration object of a button:

type - (string) the type of a control, set it to "button"
id - (string) the id of a control, auto-generated if not set
css - (string) adds style classes to a button
hotkey - (string) the name of the hot key for the button
html - (string) optional, a string with HTML that should be inserted into the button
value - (string) a value of the button. You need to set either the html or value property to the button
tooltip - (string) a tooltip for the button
count - (number) a badge with a number
countColor - (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
items - (array) an array of nested controls
group - (string) defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive
twoState - (boolean) the flag that defines whether a button can be used in two states: active (pressed) and inactive (unpressed)
active - (boolean) for twoState buttons, if true, the button is in the active state
multiClick - (boolean) defines the behavior of the Undo/Redo buttons:
- true - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held
- false - one action is reverted/re-applied on each click of the Undo/Redo button
icon - (string) an icon of the button
view - (string) defines the look of a button: "flat"|"link"
size - (string) defines the size of a button: "small"|"medium"
color - (string) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success"
full - (boolean) extends a button to the full width of a form
circle - (boolean) makes the corners of a button round
loading - (boolean) adds a spinner into a button

Adding an icon

A button can have an icon which is set through the corresponding option icon:

{
    type:"button", value:"Done",
    icon:"dxi dxi-check"
}

Adding a badge with a number

You can add a number badge to the button to display information like the number of new messages. The badge is set via the count property:

{
    type:"button", value:"Done",
    icon:"dxi dxi-check",
    count:10
}

Adding HTML content

You can add any custom HTML content to a button with the help of the html property:

{
    type: "button",
    html: "<div class='user-button'><img src='../avatars/Avatar.jpg'/></div>",
}

Showing/hiding a button

To hide/show a button, you should pass the ID of the button to the hide() / show() Toolbar methods:

toolbar.show(id);
toolbar.hide(id);

Enabling/disabling a button

Any button in the toolbar can be enabled/disabled:

toolbar.enable(id);
toolbar.disable(id);

Setting tooltip

You can add a tooltip to a button:

{
    type:"button", 
    value:"Click", 
    tooltip:"Click me and find out why"  }

Two state buttons

You can create buttons with two states: active (pressed) and inactive (unpressed). The activity of a two state button is controlled via the active attribute of the Button object:

{
    type:"button", 
    value:"Select", 
    twoState:true, active:true  }

Changing state of a two state button on the fly

The state of a two state button can be changed programmatically with the setState() method of Toolbar as in:

{
    type:"button", twoState:true, value:"Check", id:"check"
}
...
toolbar.setState({"check":true});    // active:true  // or
toolbar.setState({"check":false});   // active:false

setState() accepts one parameter: a key-value pair with the ID of the button and the new value.

Accessing current state of a two state button

The current state of a two state button can be checked with the getState() method:

{
    type:"button", value:"Check", twoState:true, id:"check"
}
...
var state = toolbar.getState(); // -> { check:true } or { check:false }