dhtmlxFolders provides the possibility to display any number of elements with the same structure. So, all we need to define is the structure of a single element – other elements will have the same structure with their own data. Data structure depends on your needs (we consider JSON object structure as Javascript based items. Even if you data loaded in XML format, it will be transformed into JSON before parsing). For example:

    [{id:1,
         name:"John Petrich",
         age:23},
    {id:2,
         name:"Peter Johnson",
         age:27},
    {id:3,
         name:"Kate Bronson",
         age:31}
    ]

Depending on the type the data should look in the way you need and contain necessary data elements. From the example below you can display just name or name and age. This should be done with parser function, which gets JSON object as incoming argument and returns HTML string which represents item in dhtmlxFolders. For example the following parser function will show name and age in different formatting:

    function personParserFunc(obj,editMode,selected,active){
        return "<div style='color:navy;'>"+.obj.name[0]+"</div><small>"+obj.age[0]+" years old</small>";
    }

Incoming arguments:

• obj - json object which contains data;
• editMode - true if item should be displayed in edit mode;
• selected - true if item is selected;
• active - true for item which was clicked or selected last.

Having parser function you need to tell dhtmlxFolders that it should use this parser to create items. It should be done in the following way:

    myFolders.setItemType("js_generic",personParserFunc);

Resulting HTML which dhtmlxFolders outputs for the first item will be:

    <div class=”dhx_folders_GENERIC_item”><div style=”color:navy”>John Petrich</div><small>23 years old</small><div>

or (for selected item):

    <div class=”dhx_folders_GENERIC_item_selected”><div style=”color:navy”>John Petrich</div><small>23 years old</small><div>

As you can see a new DIV appears. This is top element for each item, which will be created by dhtmlxFolders automatically to become a container for the content you have created with Javascript. Top element css class also can be reset to different value using setCSSBaseName method. For example using the following script command before loading myFolders content:

    myFolders.setCSSBaseName(“test”);

will result in the following HTML:

    <div class=”dhx_folders_TEST_item”><div style=”color:navy”>John Petrich</div><small>23 years old</small><div>

or (for selected item):

    <div class=”dhx_folders_item_TEST_selected”><div style=”color:navy”>John Petrich</div><small>23 years old</small><div>

If you compare it to the previous one you’ll see where “test” goes. Now you can define css for dhx_folders_TEST_item and dhx_folders_TEST_item_selected classes to have your own style for top item element and included elements.

The first argument tells dhtmlxFolders that created items are based on generic Javascript parser (not based on XML-XSL), the second - is parser function to use. As it was mentioned above, using script way of parsing forces dhtmlxFolders to divide incoming XML (if you've loaded data in XML format) into json objects based on the tag name (default is “item”, but this name can be changed with setItemTagName mathod). In this case nested tags will be saved as property of the object (parent node) as an array of objects (tag value will be available as _nodevalue property) and attributes to properties as simple values.

Inside parser function there are some objects accessible: this - refers to dhtmlxFolders object. Thus you can access any necessary value from it, like this._userdataCol - array of global userdata name-value pairs, which populated automatically from <userdata> tags located on first level of xml file (if original datasource loaded from server was in XML format)