DHTMLX Docs & Samples Explorer

Index
dhtmlxtoolbar

## Data Loading

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.

### Data Loading from XML File

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.

### Data Loading from XML String

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.

### Data Loading from Script

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.

### onLoadFunction

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>