What is really nice with dhtmlxFolders is that you can create your own look for item. There are two ways to do this:

1. Javascript
2. XSL

The steps you need to take to create your own XSL based item types are the following:

First – some details about how it works from inside. 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 (XML structure as we talk about XML based items) depends on your needs. The only requirement is that the name of nodes which represent items should be “item” (this also can be changed with setItemTagName). Code snippet of possible xml code is demonstrated below:

<data>
     <item id=”1”>
         <title>Some text</title>
     </item>
     <item id=”2”>
         <title>Another text</title>
     </item>
</data>

This is another one:

<data>
     <item id=”ER009723A” price=”9.99” rate=”7”>
         <title>Some text</title>
         <author>Bill Krowler</author>
         <date>2008-01-29</date>
         <description>Some long text inside</description>
    </item>
    <item id=”EB006533A” price=”9.99” rate=”8”>
        <title>Some text</title>
        <author>Bill Krowler</author>
        <date>2007-12-21</date>
        <description>Some long text inside</description>
    </item>
</data>

As you see there are no other limitations. All data you need you can put inside item tag. The trick is in the xsl you’ll add to it. In general cases XSL structure should also be the same:

    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
        <xsl:template match="item">
 
               [YOUR CODE HERE]
 
        </xsl:template>
 
    </xsl:stylesheet>

What is specific for your needs should be put there instead of [YOUR CODE HERE]. Each item will be processed using this code. And the result will be used as HTML for each item top element. For example:

    <div style=”color:red”><xsl:value-of select=”./title”/><div>

Each item title value will displayed as red text one by one. Resulting item HTML will be the following:

    <div class=”dhx_folders_item”><div style=”color:red”>value of title tag</div><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 XSL.

This is just simple sample. You can use the code as complex as you need – there are no limits. 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:red”>value of title tag</div><div>

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

1. Any data from xml which was put into <userdata> tag can be used inside xsl file as global variable with same name. For example:

  <data>
      <userata name=”images_dir”>./myimages</userdata>
      <item>…</item>
  </data>

if you include xsl:variable tag defining “images_dir” global variable with any default value into your xsl file, then it will be replaced with “./myimages” value before processing. Here is sample of variable definition in xsl file which will work:

  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
       <xsl:variable name="images_dir">.</xsl:variable>
       <xsl:template match="item">
           [YOUR CODE HERE]
       </xsl:template>
  </xsl:stylesheet>

This way you can pass necessary global value to each item.