Check documentation for the latest version of dhtmlxSuite Button Control DHTMLX Docs

Button Control

presents a simple button:

Adding Button

A Button item can be easily added to the toolbar with the help of the addButton method:

myToolbar.addButton(id, pos, text, imgEnabled, imgDisabled);

Parameters that should be passed are:

  • id - id of a new button;
  • pos - position of the button;
  • text - button's label;
  • imgEnabled - path to image for the enabled state of the button;
  • imgDisabled - path to image for the disabled state of the button.

Related sample:  Button creation

Showing/Hiding Button

To hide/show any button the user should pass button's id to the following methods:


The user has the possibility to check whether any button is visible. The method returns true if the button is visible:

var isVisible = myToolbar.isVisible(id); // returns true/false

Related sample:  Button manipulation

Enabling/Disabling Button

Any button in the toolbar can be enabled/disabled by user:


Also the user has the possibility to check whether any button is enabled. This can be done by calling the following method:

var isEnabled = myToolbar.isEnabled(id); // returns true/false

The user should pass id of the button that will be checked. The method returns true if the button is enabled, and false if it's disabled.

Related sample:  Button state

Setting Button's Text

The user can set any button's text/label. This button's id and text of button's label are passed as parameters to the following method:

myToolbar.setItemText(id, text);

The user can get button's text using getItemText method. The method returns the current title text of the button:

var text = myToolbar.getItemText(id); // returns current item's text

Related sample:  Button text

Setting Button's Image

Any button in the toolbar can have its own image displayed in the button display area. setItemImage and setItemImageDis methods allow user to set image to a button by passing the following parameters:

  • id - id of the button;
  • url - path to the image for the enabled/disabled state of the button.
myToolbar.setItemImage(id, url);
myToolbar.setItemImageDis(id, url);

Button's image whether for the enabled or the disabled state can be easily removed/cleared by using the clearItemImage and clearItemImageDis methods to which the user should pass button's id:


Related sample:  Button image

Setting Buttons's Tooltip

The user can specify the supplementary information regarding any button in the toolbar via the setItemToolTip method. It takes the following parameters:

  • id - button id;
  • tip - this parameter sets the title that appears when user hovers the mouse over the button.
myToolbar.setItemToolTip(id, tip);

The following method can return the current button's tooltip text:

var tip = myToolbar.getItemToolTip(id); // returns current button's tooltip text

Related sample:  Button tooltip

Back to top