Skip to main content

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

Properties​

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:

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 dxi-plus",
    value:"New"
},-1,"files");

ribbon.data.add({
    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.show(id);
ribbon.hide(id);

Disabling/enabling blocks​

A block can be enabled/disabled:

ribbon.enable(id);
ribbon.disable(id);