Check documentation for the latest version of dhtmlxSuite loadStruct DHTMLX Docs

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );
datastring|objectXML|JSON URL|string|object
doOnLoadfunction(optional) calls user-defined handler after data is loaded and rendered
promisea "promise" object

Example

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
});

Details

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:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

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.

JSON Format

// 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
}

XML Format

// 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
/>

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top