loadStruct

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

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

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

{
    skin: "dhx_skyblue",    // optional, skin
    multi_mode: false,      // optional, true for multimode
    icons_path: "icons/",   // optional, path for icons if they will be used
    items: [
        {
            id:     "a1",       // required, will be generated automatically if empty
            text:   "Main Page" // required, header text
                                // you can use <span style='color:red;'>Text</span>
            height: 150,        // optional, item height (multi mode only)
            icon:   "icon.png", // optional, icon for header
            open:   true        // optional, open on init
                                // single mode - open first item if not set
                                // multi mode - open any item if not set
        },
        {id: "a2", ...},
        {id: "a3", ...}
    ]
    // deprecated from 4.0:
    icon_path: "icons/"     // => icons_path: "icons/"
    items: [
        {
            img: "icon.png" // => icon: "icon.png"
        }
    ]
}

XML Format

<?xml version="1.0" encoding="UTF-8"?>
<accordion                      // required, root tag
    skin      = "dhx_skyblue"   // optional, skin
    multiMode = "true"          // optional, true for multimode
    iconsPath = "icons/"        // optional, path for icons if they will be used
>
    <cell                       // required, tag for item
            id     = "a1"       // required, will be generated automatically if empty
            height = "150"      // optional, item height (multi mode only)
            icon   = "icon.png" // optional, icon for header
            open   = "true"     // optional, open on init
    >
        Main Page               // required, header text
    </cell>
    <cell id="a2" ...>text2</cell>
    <cell id="a3" ...>text3</cell>
</accordion>

• added in 4.0
• integration with Promiz.js is added in version 5.1

Back to top