Check documentation for the latest version of dhtmlxSuite Loading Data from XML DHTMLX Docs

Loading Data from XML

Loading Data from XML File

The loadStruct() method loads the toolbar data from an XML file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:

myToolbar.loadStruct("[path to this file]/file.xml", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

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

Related sample:  Init from xml

Templates for Toolbar controls in XML format are given below.

Loading Data from XML String

The loadStruct() method loads toolbar data from XML string as well. When the data is loaded into the object, a user-defined handler is called. All the data is loaded at once:

myToolbar.loadStruct('<data><node id="a1".../></data>', onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here       
};

XML Format Template

This section will give you the idea of XML Format Template. Its aim is to help you in creating XML files for dhtmlxToolbar initialization.

<?xml version="1.0"?>
    // a top xml tag, mandatory
    <toolbar>
        // a button item with images for enabled/disabled state only;
        // each item must have a unique ID
        <item id="new" type="button" img="new.gif" imgdis="new_dis.gif"/>
        // a button item with text, images for enabled/disabled states
        <item id="save" type="button" text="Save" img="save.gif" 
            imgdis="save_dis.gif"/>            
        // a button item with text only
        <item id="open" type="button" text="Open"/>
        // a separator item
        <item id="sep01" type="separator"/>
        // a button item with tooltip
        <item id="undo" type="button" img="undo.gif" imgdis="undo_dis.gif" 
            title="Undo"/>
        <item id="redo" type="button" img="redo.gif" imgdis="redo_dis.gif" 
            title="Redo"/>
        // a disabled button
        <item id="cut" type="button" img="cut.gif" imgdis="cut_dis.gif" 
            title="Cut" enabled="false"/> 
        // a spacer item
        <item id="sp" type="spacer"/>
        <item id="copy" type="button" img="copy.gif" imgdis="copy_dis.gif" 
            title="Copy"/>
        <item id="paste" type="button" img="paste.gif" imgdis="paste_dis.gif" 
            title="Paste"/>
        <item id="sep02" type="separator"/>
        // a two-state button with images for enabled/disabled states
        <item id="form" type="buttonTwoState" img="form.gif" imgdis="form_dis.gif" 
            title="Form"/>
        // tooltip
        <item id="filter" type="buttonTwoState" img="filter.gif" 
            imgdis="filter_dis.gif" text="Filter" title="Filter"/>
        // a pressed two-state button with text only
        <item id="any_word" type="buttonTwoState" text="Any Word" selected="true"/>
        // an input button
        <item id="txt_1" type="buttonInput"/>
        // an input button with predefined initial value, width, and tooltip
        <item id="txt_2" type="buttonInput"value="Filter Text" width="60" 
            title="type the text here"/>
        <item id="sep1" type="separator"/>
        // a select button with text only
        <item id="history" type="buttonSelect" maxOpen="3" openAll="true" 
            renderSelect="true" mode="select" text="History">
            // a listed option with text only
            <item type="button" id="8_1" text="Today"/>
            // a preselected listed option
            <item type="button" id="8_2" text="Yesterday" selected="true"/>
            <item type="button" id="8_3" text="Last Week"/>
            <item type="button" id="8_4" text="Last Month"/>
            <item id="8_sep0" type="separator"/> // a listed option - separator
            // a listed option with image for the enabled state, text
            <item type="button" id="8_5" img="icon_more.gif" text="More..."/>
            </item>
        <item id="sep2" type="separator"/>
        // a select button with text, images for enabled/disabled states
        <item id="page_setup" type="buttonSelect" img="page_setup.gif" 
            imgdis="page_setup_dis.gif"text="Page"> 
            <item type="button" id="9_11" text="Layout"/>
            <item type="button" id="9_12" text="Management"/>
        </item>
        // a select button with images for enabled/disabled states, tooltip
        <item id="print" type="buttonSelect" img="print.gif" 
            imgdis="print_dis.gif" title="Print">
            <item type="button" id="9_1" text="Page"/>
            <item type="button" id="9_2" text="Selection"/>
            <item id="9_sep0" type="separator"/>
            <item type="button" id="9_3" text="Custom..."/>   
        </item>
        <item id="sep3" type="separator"/>
        // a slider item
        <item id="slider" type="slider" length="70" valueMin="10" valueMax="100" 
            valueNow="70" textMin="10 MBit" textMax="100 MBit" toolTip="%v MBit"/>
        // mandatory slider's parameters:
        // length - length (in px),
        // minValue (int), maxValue (int),
        // valueNow - current value (set by the default, int)
        // optional slider's parameters:
        // textMin - label for minValue,
        // textMax - lavel for maxValue,
        // toolTip - tolltip template (%v will be replaced with the curent value)
        <item id="sep4" type="separator"/>
        <item id="text" type="text" text="dhtmlxToolbar Demo"/> // a text item
    </toolbar>

Please note, for the Select button you can define additional attributes that relate to the following optional parameters: "renderSelect", "openAll" and "maxOpen". Read more about these parameters here.

Back to top