Block

The Block control is used for grouping related controls.

DHX Ribbon Block groups controls

Creating a Block

This is the basic syntax of a block with two buttons in a row:

{
   type: "block",
   title: "Action",        
   items: [
     { id: "copy", icon: "mdi mdi-content-copy", value: "Copy" },
     { id: "cut", icon: "mdi mdi-content-cut", value: "Cut" }
   ]
}

Attributes

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

  • type - (string) the type of a control, set it to "block"
  • id - (string) the id of a control, auto-generated if not set
  • title - (string) sets a text label beneath the block
  • direction - (string) defines the layout of controls within the block: "col" or "row"; controls that do not fit in one row/column are automatically placed in the next row/column
  • items - (array) an array of nested controls
  • css - (string) adds a custom CSS class to the block

Adding a Block

A block can be added to a ribbon with the help of the add() method of TreeCollection:

ribbon.data.add({
    title:"File",
    type:"block",
    id:"files",
    direction:"row"
});

Controls for this block can be added afterwards with the same method:

ribbon.data.add({
    type:"button",
    icon:"dxi-plus",
    value:"New"
},-1,"files");
 
ribbon.data.add({
    type:"iconButton",
    icon:"dxi-file"
},-1,"files");

add() in this case receives three parameters:

  • item - the configuration of the added item
  • index - defines the position of the item in the block (-1 will place it after the last control)
  • blockId - the ID of the block

Nesting blocks

You can add blocks inside blocks to create complex blocks with several rows and columns, e.g.:

{
    title:"File",
    type:"block",
    direction:"col", 
    items:[
        {
            type:"block", direction:"row",
            items:[
                { type:"button", icon:"dxi-plus", value:"New" },
                { type:"button", icon:"dxi-file", value:"File" }
            ]
        },
        {
            type:"block", direction:"row",
            items:[
                {
                    type:"imageButton", count:10,
                    src:"../img/avatar4.png"
                },
                {
                    type:"imageButton", value:"Torch",
                    src:"../img/avatar3.png"
                }
            ]
        }
    ]
}

Hiding/showing blocks

To hide/show a block, you should pass its ID to the hide() / show() methods:

ribbon.show(id);
ribbon.hide(id);

Disabling/enabling blocks

A block can be enabled/disabled:

ribbon.enable(id);
ribbon.disable(id);
Back to top