dhtmlxmenu:dhtmlxmenu_init_data_loading [Skin test wiki]

Data Loading

The next step of initialization of dhtmlxMenu component is Data Loading. The user can choose one of 5 data loading possibilities:

From external XML file (with Ajax);
From XML string;
From HTML object;
From Script;
Dynamical loading (with Ajax).

loadXML() method loads menu 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 the user. All the data is loaded at once.

    <script>
        menu.loadXML("path/to/file/file.xml", function(){
            // will called if specified after menu will completely loaded
        });
        // or
        onLoadFunction = function(){
            // will called if specified after menu will completely loaded
        }
        menu.loadXML("path/to/file/file.xml", onLoadFunction);
    </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 is the same as loadXML, but lloads menu data from the XML string. All the data is loaded at once.

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

The first parameter for loadXMLString() method is the XML string from our html file, while the second parameter is an optional user-defined handler. :?: See here for XML Format Template.

Data Loading from HTML Object

loadFromHTML() method loads content from HTML object to the menu. First, the user should create this HTML object. For example:

    <body> 
        <div id="menuData" style="display: none;">  
            <div id="m1" text="File"> // the first top menu item
               <div id="m11" text="New" <hotkey>Ctrl+N</hotkey></div>// the first child item
               <div id="ms1" type="separator"></div> // a separator	
               <div id="m12" text="Open"><hotkey>Ctrl+O</hotkey></div> // the second child item  
            </div>    
        </div>
    </body>

Then loadFromHTML() should be applied with the following parameters:

objectId - id of data container (“menuData” in our case);
clear - true|false, removes HTML object after data was loaded, if this parameter is set to true;
onLoadFunction - a user-defined handler, which will be called, when the data is loaded (optional).

    <script>
        menu.loadFromHTML("menuData", true, function(){
            alert("Menu was loaded from HTML Object.");
        });
    </script>

Data Loading from Script

Loading data from script means that the user should write a special method for adding every menu item. In our example to add a new sibling item, a child item, a new separator and set a hotkey, we should write the following:

      <script>
          menu.addNewSibling(null, "file", "File", false); // adding the first item to the menu, "nextToId" param is null
          menu.addNewChild("file", 0, "file_new", "New", false); // adding a new child item
          menu.setHotKey("file_new", "Ctrl+N"); // setting a hotkey to a button
          menu.addNewSeparator("file_new"); // adding a separator
      </script>

Refer to the section Items Settings Manipulations to learn about the methods used in the above mentioned snippet.

Adding first menu item with script:

    <script>
        // init dhtmlxMenu
        var menu = new dhtmlXMenuObject();
        // adding first top-level item
        menu.addNewSibling(null, "itemId", "itemText");
        // or
        menu.addNewChild(null, 0, "itemId", "itemText");         
        // adding first sub-level chechbox/radiobutton
        menu.addCheckbox("child", "nextToId", 0, "itemId", "itemText");
        menu.addRadioButton("child", "nextToId", 0, "itemId", "itemText");
    </script>

Dynamical Loading

Dynamical loading means loading data on request. The user can split data into parts by levels and decrease loading time this way. enableDynamicLoading() method should be used with the following parameters:

url - server-side script, transmitted parameters are action (set to “loadMenu”) and “parentId” (will pass id of the selected complex item for loading its child items into sub-level polygon);
icon - true|false, replaces item's arrow icon while loading data with a “loading” icon to indicate the process of data loading.

      <script>
          menu.enableDynamicLoading(url, icon);
      </script>

So, in our case we should write this line of code (without an icon):

      <script>
          menu.enableDynamicLoading("[script url]");
      </script>

onLoadFunction()

onLoadFunction() is a user-defined handler that is called after the data was loaded into the object:

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

Clearing Menu

To remove all loaded items from menu users should call clearAll() method. Meanwhile users are allowed to load another XML:

    <script>
        menu.clearAll();
    </script>

Unloading Menu

unloadMenu() method gives the possibility to unload the component completely:

    <script>
        var menu = new dhtmlXMenuObject();
        ...
        // unload menu
        menu.unload();
        menu = null; 
    </script>