Loading from Script

Loading data from script means that the user should write a special method for adding every menu item. In our example to add a new sibling item, a child item, a new separator and set a hotkey, we should write the following:

// adding the first item to the menu, "nextToId" param is null
myMenu.addNewSibling(null, "file", "File", false); 
// adding a new child item
myMenu.addNewChild("file", 0, "file_new", "New", false); 
// setting a hotkey to a button
myMenu.setHotKey("file_new", "Ctrl+N"); 
// adding a separator
myMenu.addNewSeparator("file_new");

(Refer to the section Configuring Menu Items to learn about the methods used in the above mentioned snippet.)

Adding first menu item with script:

// init Menu
var myMenu = new dhtmlXMenuObject();
 
// adding first top-level item
myMenu.addNewSibling(null, "itemId", "itemText");
// or
myMenu.addNewChild(null, 0, "itemId", "itemText");         
 
// adding first sub-level checkbox/radiobutton
myMenu.addCheckbox("child", "nextToId", 0, "itemId", "itemText");
myMenu.addRadioButton("child", "nextToId", 0, "itemId", "itemText");

External JSON file

To load menu data from a JSON file use the loadStruct() method:

var myMenu = new dhtmlXMenu();
myMenu.loadStruct("server/data.json", function(){
    // data loaded and rendered
    // your code here
});

The first parameter of the loadStruct() method is the path to the JSON file, while the second parameter is an optional user-defined handler.

JSON String

To load data from a JSON string, use the same method - loadStruct():

var myMenu = new dhtmlXMenu();
myMenu.loadStruct('{data:[{id:"a1",..},{id:"a2",..}]}', function(){
    // data loaded and rendered
    // your code here
});

The first parameter for the loadStruct() method is the JSON string, while the second parameter is an optional user-defined handler.

JSON Format Template

// common for all-at-once loading
[
    {id: "a", items:[
        {id: "a1", ...},
        {id: "a2", ...},
        {id: "a3", ...}
    ]},
    {id: "b", ...},
    {id: "c", ...}
]
 
// dyn.loading, root level
[
    {id: "a", complex: true, ...},
    {id: "b", complex: true, ...}
]
// dyn.loading, nested levels
{
    parentId: "a",                      // required, parent item id
    items: [
        {id: "a1", complex: true, ...}, // has subitems
        {id: "a2", ...}                 // single item
    ]
}
 
// item
{
    id:      "open"         // required, will be generated automatically if empty
    text:    "Open"         // required, item text
    img:     "open.gif"     // optional, icon for enabled item
    imgdis:  "open_dis.gif" // optional, icon for disabled item
    enabled: false          // optional, false to disable on init
    complex: true           // optional, dyn.load only, true if item has subitems
    hotkey:  "Ctrl+O"       // optional, hotkey (text in menu only)
    userdata: {             // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    link: {                 // optional, direct link for onclick
        target: "blank"     // optional, open in a new tab/window
        link:   "url"       // required, url to open
    }
    items: [{},{},...]      // optional, subitems if any
    // deprecated from 4.0:
    disabled:      true             // => enabled: false
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
}
 
// checkbox
{
    id:      "l_num"            // required, will be generated automatically if empty
    type:    "checkbox"         // required, item type
    text:    "Line Numbering"   // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+L N"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}
 
// radio button
{
    id:      "transparent"      // required, will be generated automatically if empty
    type:    "radio"            // required, item type
    group:   "bgcolor"          // required, radiobuttons group
    text:    "Transparent"      // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+F T"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}
 
// separator
{
    id:   "s_id"        // required, will be generated automatically if empty
    type: "separator"   // required, item type
}

Back to top