How to create your own toolbar type ?

You can define your own toolbar type.
Here is an example of how to make it:

dhx.Type(dhx.ui.toolbar, {
 name:"BigButtonsBar",
 css:"dhx_bigbuttonsbar",
 height: 55,
});

Parameters

In the dhx.Type() you can set the following parameters:

  • name - the name of the new created type.
  • css - the appropriate css class
    The parameter specifies an attribute 'class' where you define all staff for toolbar elements' appearance & behavior.
  • height - the height of the toolbar
  • vertical - lets to set toolbar's width
    (boolean) The parameter defines whether ('true') or not ('false') toolbar's width can be set. The default value is 'false'.
    Please note, if you set the parameter to 'true', the parameter 'height' will be ignored and the standard height is specified.
    You can't set the height and the width of the toolbar at the same time.
  • width - the width of the toolbar

Extra parameters

You can use 3 more parameters if you need to change the existed type cardinally. The parameters cooperate and define the toolbar.

  • template
  • templateStart
  • templateEnd

Firstly, code contained in templateStart parameter is executed. Then, code from the template and finally, templateEnd's code.

dhx.Type(dhx.ui.toolbar, {
  name:"TransparentBar"
  css:"dhx_transparentbar",
  template:dhx.Template("#value#"),
  vertical:true,
  width:210,
  templateStart:dhx.Template("<div dhx_l_id='#id#' class='dhx_list_item dhx_list_{common.css}_item{obj.$selected?_selected:}' style='width:{common.width}px; height:{common.height}px; padding:{common.padding}px; margin:{common.margin}px; overflow:hidden;'>"),
  templateEnd:dhx.Template("</div>")
}