First of all you need to choose container for dhtmlxFolders object which will define width, height for it and its place on page. Most useful HTML object for these purposes is DIV element. It can be in any type of position - relative, absolute, static or fixed. But some css attributes are mandatory for it:

It also should have id attribute.
So here is a sample of valid dhtmlxFolder container:

Having container you now can create dhtmlxFolders object and put it there. This can be done with single script command:

Now, you have javascript object myFolders which has all functionality of dhtmlxFolders. You can define type of items you want to have in it and load data. We'll do this with short set of script commands:

setItemType method call is necessary if you want to use some of predefined types (read chapter "Define items type using built-in types") or switch from one type to another (read "Changing type dynamically" chapter).

setUserData method sets name/value pairs which then can be used in XSL as xsl variables. You can pass path to icons or some other values this way. If you use built-in or third party types you need to refer to the documentation to find out what variables should be set. Or look into xsl file to see what variables are used there. Userdata cab be set with script or in XML (using userdata tag).

loadXML method gets data provided in XML format from server and populates dhtmlxFolders object with items. As you can see it uses two arguments:

As far as dhtmlxFolders can display any kind of data which can be presented through HTML, XML can contain any data and its format can be of any kind. But… if you use built-in or third party types you have to follow XML format required by those types. In appendix you can find a summary table of available types and corresponding XML format.

You need to understand that xml structure should be defined based not only on exact necessities of the type (what information is shown by each item), but also on some additional purposes - like ordering by different property values (even if these properties are invisible), showing information out of dhtmlxFolders object (like showing additional information for selected item). Also XML structure can be defined taking into account the possible changing of type without reloading the data. For example when files list in file browser is shown as icons or as thumbnails.

Talking about XML we do not mean only static xml files. In most cases not static content is used. XML content can be created dynamically based on database data or file system (if you need to display real file system structure) using any server-side programming language. Common requirements for xml produced by server side language:

PHP Example of creation of correct header for XML producting routine:

XML-XSL

There are 3 components of xml-xsl type :

JSON

Although dhtmlxFolders contains some built-in types it is not possible to offer universal solution for all possible cases of dhtmlxFolders usage. Thus built-in types can be considered as basis for types you need for your development. They also provide basic functionality mostly demand for file browsers. You can find a list of built-in types in dhtmlxFolders Built-in Types.

So, to use any of this type, please make sure your XML contains all necessary tags and attributes required by type you are going to use. If it is, you can apply the type:

In most cases xsl files for built-in types are in codebase/types folder inside dhtmlxFolders package. But you can put them in any place where they can be located by loadXML mathod.

XML-XSL

JSON

...

To change type of dhtmlxFolders items which were already loaded and rendered with another type you need to call the following command:

Where first argument - new type name (for your own type try "xml_generic"), second - path to new type xsl file

Selection in dhtmlxFolders behave same way as in desktop applications:

1. Single click on item selects it
2. If you click on item when other item(s) selected:
1. Holding Shift key - selects all items starting from already selected to currently clicked
2. Holding Ctrl key - adds currently clicked item to selected items (if this item wasn't selected), removes currently clicked item from selected items (if item was already selected)

To select item with script call the following command:

Items in dhtmlxFolders can be sorted using any of their parameter. To sort items you need to use sortItems method. The main thing you need to do is to define function for items comparison and pass it into that method (as first argument), second argument will be "asc" for ascending sort, "desc" for descending sort.

Items comparison function gets two abstract items as incoming arguments and returns:

For example XML representation of item in dhtmlxFolders is the following:

As you can see from example above, we get item XML node using itemObject.data.dataObj construction. Afterwards we can work with it as with XMLDOM node object.
To compare numeric value of size node we'll use the following comparison function:

Complete sorting command will be the following:

Apply filter

Use filterItems(...) method to filter dhtmlxFolder items by some mask.
Like with sorting, to create filter for dhtmlxFolders item you need to define function where you decide if item should be visible after filter applied or not. This function gets abstract item object as first incoming argument and mask as second argument. Function returns true if item should be visible, false if it shouldn't be.

For example XML representation of item in dhtmlxFolders is the following:

To filter items which name begins with some value, we define the following function:

Complete filtering command will be the following:

Clear filters

To clear all applied filters use filterClear method:

Apply multiple filters

To apply filter keeping previous filters use third argument of filterItems method:

By default all items loaded from server or created with script are shown at once. But to increasing loading speed and make perception better you can use paginal output (this is mostly usefull for product catalogs). With paginal output only limited number of items are visible. Other items can be viewed by switching to other page(s).

Turn on/off paginal output

To turn on paginal output use the following way:

Where first argument is number of items per page, second - allows dhtmlxFolders to request additional content from server when no items available to fill complete page (more details about dynamical loading see below).

To reset new number of items per page use enablePaging again - with new number items per page. Each time you change number of items per page, dhtmlxFolders switches to 1st page.

To turn paging off use:

Turn on ability to load additional items from server (dynamical loading)

Using second argument of enablePaging method you can allow (true) or deny (false) dhtmlxFolders to apply for additional content to server. In case it is allowed, dhtmxFolders will send request to server using same URL which was specified in loadXML method but with additional parameter: dhx_global_page - each time it has not enough items in collection to populate last page and untill this request returns 0 items. dhx_global_page parameter will increment its value by 1 with each next request starting from very first one (so, first automatic request will have dhx_global_page=2)

Important: if you are going to use paging with dynamical loading please make sure you included processing of dhx_global_page into your xml producing routine. Otherwise dhtmlxFolders will get same content endless times.

How to switch between pages (user interface)

First version of dhtmlxFolders doesn't provide ready to use interface objects for managing paging, but it does provide API methods for building it. Main method for it is: goToPage(pgNum). It provides the possibility to navigate through pages. If no page number passed, then it will return to the first page.
On each call, goToPage returns value, which means the following:

Other methods which can be useful while working with paging:

dhtmlxFolders supports drag-n-drop in following ways:

To enable drag-n-drop you need to call the following command:

As far as drag-n-drop uses two images (included into dhtmlxFolders delivery package) to visualize before/next drop types, you also need to set path to codebase/imgs forlder:

As far as Drag-n-drop in dhtmlxFolders has default actions for "before" and "next" drop types (move source item before/next target item), but no default action for "in" drop type, you'll need to define it on your own , or it will just do nothing. Action for any type of drag-n-drop can be reset using onBeforeDrop event handler. For example:

If this event handler returns false, then default action will be canceled. Thus it can be used to decide if drop should be allowed or not depending on drop type, source and target items.

As with other dhtmlx components you can set event handlers on number of events using same method - attachEvent(…). List of available events can be found in API documentation. Nearly each event handler gets some parameters. This also described with list of available events.

Here is an example of how to set event handler to capture the moment item was clicked:

As you can see from example, item ID was passed to the event handler, so you can use it to get item object and all it's properties and values.

To delete items with script you can use deleteItem method with item ID passed into it. You also can pass array of IDs to delete more than one item at once.
You can use the following set of commands to delete selected item(s):