loads data to the component via XML or JSON, usually component config
| data | string|object | XML|JSON URL|string|object |
| doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered |
| promise | a "promise" object |
var myComponent = new dhtmlXComponent();
// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});
// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');
// json/xml from server
myComponent.loadStruct("server/data.xml");
// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
// data loaded and rendered
// your code here
});
// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
// data loaded and rendered
// your code here
});
// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
// data loaded and rendered
// your code here
});
// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
// text - a server side response
});
The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.
In the case of loading config from server:
DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.
// 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
}
// common
<?xml version="1.0"?>
<menu // required, root tag
parentId = "id" // required, dyn.load only, parent item id
>
<item id="a" ...> // items, 1st level
<item id="a1" .../> // subitems
<item id="a2" .../>
<item id="a3" .../>
</item>
<item id="b" .../>
<item id="c" .../>
</menu>
// 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
>
// optional, alternate item text
<itemtext>File</itemtext>
// optional, hotkey (text in menu only)
<hotkey>Ctrl+O</hotkey>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
// optional, direct link for onclick
// target="blank" (optional) to open in a new tab/window
<href target="blank">url</href>
</item>
// checkbox
<item
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
>
// optional, alternate item text
<itemtext>Line Numbering</itemtext>
// optional, hotkey (text in menu only)
<hotkey>Ctrl+L N</hotkey>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// radio button
<item
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
>
// optional, alternate item text
<itemtext>Transparent</itemtext>
// optional, hotkey (text in menu only)
<hotkey>Ctrl+F T</hotkey>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// separator
<item
id = "s_id" // required, will be generated automatically if empty
type = "separator" // required, item type
/>