Skip to main content


The Block control is used for grouping related controls.

DHX Ribbon Block groups controls

Related sample: Ribbon. Blocks

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" }   ]}


You can provide the following properties in the configuration object of a Block control.

Adding a Block#

A block can be added to a ribbon with the help of the add() method of TreeCollection:{    title:"File",    type:"block",    id:"files",    direction:"row"});

Controls for this block can be added afterwards with the same method:{    type:"button",    icon:"dxi dxi-plus",    value:"New"},-1,"files");{    type:"iconButton",    icon:"dxi dxi-file"},-1,"files");

add() in this case receives three parameters:

itemthe configuration of the added item
indexdefines the position of the item in the block (-1 will place it after the last control)
blockIdthe ID of the block

Adding HTML content#

You can add any custom HTML content to an item of the block with the help of the html property:

{    type: "block",    title: "Progress",    items: [        {            html: "<div id='preloader'><div id='loader'></div></div >",            size: "auto"        }    ]};

Related sample: Ribbon. Item HTML Content

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 dxi-plus", value:"New" },                { type:"button", icon:"dxi 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.hide(id);

Disabling/enabling blocks#

A block can be enabled/disabled: