Create your own item types for dhtmlxFolders
What is really nice with dhtmlxFolders is that you can create your own view for item. There two ways to do this:
1. Javascript
2. XSL
Here I’ll explain XSL way, as it is simpler and faster to begin. First – some details about how it works from inside. dhtmlxFolders provides the possibility to display any number of elements with same structure. So, all we need to define is the structure of single element – other elements will have same structure with their own data. Data structure (XML structure as we talk about XML based items) depends on your needs. The only requirement - the name of nodes which represent items should be “item” (this also can be changed, but let’s leave it for another story). So here is possible xml:
<data>
<item id=”1”>
<title>Some text</title>
</item>
<item id=”2”>
<title>Another
text</title>
</item>
</data>
And 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>
will display each item title value as red text one by one. Resulting item HTML will be:
<div class=”dhx_folders_item”><div style=”color:red”>value of title tag</div><div>
You see – new DIV appears. This is top element for each item, which will be created by dhtmlxFolders automatically to be 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.
2. To use item type of your own with dhtmlxFolders use “xml_generic” as item type name:
myFolders = new dhtmlxFolders("folders_container");
myFolders.setItemType("xml_generic");
myFolders.loadXML("/path/to/xmlsource.xml","path/to/your/xslfile.xsl");
xml_generic type is common for any user defined type based on xml-xsl. Results of xsl transformations will be put inside DIV element with css class name set to dhx_folders_GENERIC_item
3. If you need to define your own css for top item DIV, add the following line of code to previous snippet and necessary css definition to your page (new css class name is created based of the value you passed into method as described in previous chapter):
myFolders.setCSSBaseName(…);