There are several simple ways of loading options into dhtmlxMenu:
First, you need to prepare a data set that will be loaded into Menu.
dhtmlxMenu expects loaded data in the JSON format. Here is an example of an appropriate data set:
var data = [
{ value: "File",
items: [
{
value: "New File",
icon: "dxi dxi-file-outline",
},
{
value: "Remove File",
icon: "dxi dxi-delete",
}
]
},
{
type: "separator"
},
{ value: "Edit",
items: [
{
value: "Undo",
icon: "dxi dxi-undo",
},
{
value: "Redo",
icon: "dxi dxi-redo",
}
]
},
{
type: "spacer"
}
]
A data set consists of objects with configurations of menu controls. Templates for Menu controls in JSON format are given below.
You can load data to a menu from an array with the parse() method of TreeCollection. Pass a predefined data set as a parameter of this method:
menu.data.parse(data);
Related sample: Menu. Basic Initialization
The load method of Tree Collection loads menu 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.
menu.data.load("[path to this file]/file.json");
Related sample: Menu. Basic 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:
menu.data.load("/some/data").then(function(){
// some logic here
});
This section will give you the idea of JSON format templates for separate Menu controls.
The menuItem object has the following properties:
| type | (string) the type of a control, set it to "menuItem" |
| id | (string) the id of a control, auto-generated if not set |
| parent | (string) the parent of the item |
| value | (string) a value for the menu item. You need to set either the value or html property to the item |
| html | (string) optional, a string with HTML that should be inserted into the menu item |
| css | (string|string[]) adds style classes |
| icon | (string) the name of an icon from the used icon font |
| items | (array) an array of children controls (note that all the children should have the type menuItem) |
| hotkey | (string) the name of a keyboard shortcut for a menu item |
| count | (number|string) a badge with a number |
| countColor | (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
| hidden | (boolean) defines whether a control is hidden |
| disabled | (boolean) defines whether an item is disabled |
// menuItem
{
id: "print",
type: "menuItem",
value: "Print",
icon: "dxi-printer",
hotkey: "Alt+P",
items:[
{
type: "menuItem",
value: "Print"
},
{
type: "menuItem",
value: "Preview and print",
icon: "dxi-magnify"
}
]
}
The navItem object has the following properties:
| type | (string) the type of a control, set it to "navItem". If not specified - the "menuItem" type is applied by default. |
| id | (string) the id of a control, auto-generated if not set |
| parent | (string) the parent of the item |
| value | (string) a value of the navItem. You need to set either the value or html property to the navItem |
| html | (string) optional, a string with HTML that should be inserted into the navItem |
| css | (string|string[]) adds style classes to a navItem |
| icon | (string) an icon of the navItem |
| items | (array) an array of nested controls |
| twoState | (boolean) adds two states to the item: active (pressed) and inactive (unpressed) |
| group | (string) defines the name of a group of controls a navItem belongs to. If one of the navItems in the group becomes active, all others automatically become inactive |
| active | (boolean) sets the state of a twoState item |
| hotkey | (string) the name of a keyboard shortcut for a menu item |
| count | (number) a badge with a number |
| countColor | (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
| hidden | (boolean) defines whether an item is hidden |
| disabled | (boolean) defines whether an item is disabled |
// navItem
{
type: "navItem",
value: "Some",
icon: "dxi-check",
count: 10
}
The customHTML object has the following properties:
| type | (string) required, the item type, set it to "customHTML". If not specified - the "menuItem" type is applied by default. |
| id | (string) the id of an item, auto-generated if not set |
| parent | (string) the parent of the item |
| html | (string) a string with HTML that should be inserted into the item |
| css | (string|string[]) adds style classes |
| hidden | (boolean) defines whether a control is hidden |
// customHTML
{
id: "custom",
parent: "edit",
type: "customHTML",
html: "<img src='../logo.svg' alt=''/>",
css: "custom-image"
});
You can add separators that will draw horizontal lines between menu options or vertical lines between menu items. The separator object has the following properties:
| type | (string) the item type, set it to "separator". If not specified - the "menuItem" type is applied by default. |
| id | (string) the ID of a control, auto-generated if not set |
// separator
{
id: "s_id",
type: "separator"
}
The spacer object has the following properties:
| type | (string) the item type, set it to "spacer". If not specified - the "menuItem" type is applied by default. |
| id | (string) the ID of a control, auto-generated if not set |
// spacer
{
id: "spacerId",
type: "spacer"
}
To save the current state of a toolbar, use the serialize() method of Tree Collection. It converts the data of a menu into an array of JSON objects. Each JSON object contains the configuration of a separate Menu item.
var state = menu1.data.serialize();
Then you can parse the data stored in the saved state array to a different menu. For example:
// creating a new menu
var menu2 = new dhx.Menu(document.body);
// parsing the state of menu1 into menu2
menu2.data.parse(state);