Skip to main content

data

Optional. Specifies an array of data objects to set into Ribbon

info

Please note that if you specify the id fields in the tree collection, their values should be unique. You can also omit the id fields in the tree collection. In this case they will be generated automatically.

data?: object[];

Example

const data = [
    {
        id: "fileBlock",
        type: "block",
        title: "File",
        items: [
            {
                type: "block",
                direction: "col",
                items: [
                    {
                        value: "File",
                        id: "file",
                        icon: "mdi mdi-file-outline",
                        size: "small",
                        ribbonHeight: "auto"
                    },
                    {
                        type: "block",
                        items: [
                            { id: "folder", icon: "mdi mdi-folder-outline" },
                            { id: "cloud", icon: "mdi mdi-weather-cloudy" }
                        ]
                    }
                ]
            },
            {
                id: "save",
                value: "Save",
                icon: "mdi mdi-content-save",
                size: "auto"
            }
        ]
    }
];

const ribbon = new dhx.Ribbon("ribbon_container", {
    css: "dhx_widget--bordered dhx_widget--bg_white", 
    data: data
});