Data Loading

There are several simple ways of loading data into dhtmlxRibbon:

  • load data from an external file
  • load data from a local data source

First, you need to prepare a data set that will be loaded into Ribbon.

Preparing data set

dhtmlxRibbon expects loaded data in the JSON format. Here is an example of an appropriate data set:

var data = [
    {
        type: "block",
        items: [
            {
                value: "New",
                icon: "dxi dxi-file-outline",
                size: "small"               
            }
        ]
    },
    {
        type: "block",
        direction: "col",
        items: [
            {
                value: "Add",
                icon: "dxi dxi-plus",
                size: "small"
            },
            {
                value: "Remove",
                icon: "dxi dxi-delete",
                size: "small"
            }
        ]
    }
 
];

A data set consists of objects with configurations of Ribbon controls. Templates for Ribbon controls in JSON format are given below.

Loading from a local source

You can load data to a ribbon from an array with the parse() method of TreeCollection. Pass a predefined data set as a parameter of this method:

ribbon.data.parse(data);

Related sample:  Ribbon. Initialization

Loading from an external file

The load method loads the ribbon data from an external JSON file. All the data are loaded at once. The parameter of the method is the path to the JSON file.

ribbon.data.load("[path to this file]/file.json");

Related sample:  Ribbon. Initialization

The component will make an AJAX call and expect the remote URL to provide valid JSON data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:

ribbon.data.load("/some/data").then(function(){
   // some logic here
});

Saving and restoring state

To save the current state of a ribbon, use the serialize() method of Tree Collection. It converts the data of a ribbon into an array of JSON objects. Each JSON object contains the configuration of a separate Ribbon control.

var state = ribbon1.data.serialize();

Then you can parse the data stored in the saved state array to a different ribbon. For example:

// creating a new ribbon
var ribbon2 = new dhx.Ribbon(document.body);
// parsing the state of ribbon1 into ribbon2
ribbon2.data.parse(state);

JSON format templates

This section will give you the idea of JSON format templates for separate Ribbon controls.

Common template

// common
[
    {id: "item_a", type: "button", ...},
    {id: "item_b", type: "input", ...},
    {id: "item_c", type: "title", ...}
]

Related sample:  Ribbon. Config Data

Block

The Block object has the following properties:

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

Button

The button object has the following properties:

// button
{
    id: "add",              
    type: "button",         
    icon: "dxi-plus",           
    value: "Add",               
    count: 11,                                  
    tooltip: "Add a new user"   
}

Custom HTML

The customHTML object has the following properties:

// custom HTML
{
    id: "custom_html",
    type: "customHTML",
    html:"<div style='height:30px; border: 2px solid'>My HTML button</div>"
}

ImageButton

The imageButton object has the following properties:

// imageButton
{
    id:       "user",               
    type:     "imageButton",        
    src:      "../img/avatar.png"               
}

Input

The input object has the following properties:

// input
{
    id: "lookup",                     
    type: "input",                    
    value: "",                       
    placeholder: "Type in to search...",      
    width: 100,                       
    label: "Search"
}

NavItem

The navItem object has the following properties:

// navItem
{
    type:"navItem", value:"Some",
    icon:"dxi-check"
}

SelectButton

The selectButton object has the following properties:

// selectButton
{
    id:"select",
    type:"selectButton",
    icon:"dxi-some",
    items:[]
}

Separator

The separator object has the following properties:

// separator
{
    id:     "sepId",        
    type:   "separator"     
}

Spacer

The spacer object has the following properties:

// spacer
{
    id:     "spacerId",     
    type:   "spacer"        
}

Title

The title object has the following properties:

// title
{
    id:         "collection",       
    type:       "title",                
    value:      "Music",                
    tooltip:    "Current collection"    
}
Back to top