The next step of dhtmlxToolbar component initialization is Data Loading.

The user can choose one of 3 data loading possibilities:

• From External XML File (with Ajax);
• From XML String;
• From Script.

loadXML() 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:

    <script>
        toolbar.loadXML("[path to this file]/file.xml", onLoadFunction);
        onLoadFunction = function(){
            // will be called if specified
        }
    </script>
 

The first parameter of loadXML() method is the path to the XML file, while the second parameter is an optional user-defined handler. See here for XML Format Template.

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

    <script>
        toolbar.loadXMLString("<bar><item....>", onLoadFunction);
        onLoadFunction = function(){
            // will be called if specified
        }
     </script>
 

See here for XML Format Template.

The user can load data to the toolbar by adding various types of items from script. Loading data from script means that the user should write a code line for adding every toolbar item. In our example to add a new button and set its tooltip, add one more button with its tooltip, and add a separator we should write the following:

 
      <script>
          toolbar.addButton(id,text,imgEnabled,imgDisabled);   
          toolbar.setTooltip(id,tip);
          toolbar.addButton(id,text,imgEnabled,imgDisabled); 
          toolbar.setTooltip(id,tip);
          toolbar.addSeparator(id,pos); 
    </script>
 

See Items Adding and Removing section for more information.

On Load Function is a user-defined handler that is called after the data was loaded into the object:

 
      <script>
          toolbar.loadXML("file.xml", function(){
              alert("the data is loaded"); // will be invoked after XML file loading (after onXLE if specified)
          });
    </script>