How to set a specific icon for each node in dynatree

Question

I have a class that represents an icon. How can I use this class to show the icon that I want for the node instead of the default ones ?

Answer 1

You should check the DynaTree documentation on Theming.

You would write a custom.css and add reference to the associated classes

<link href="skin-custom/custom.css" rel="stylesheet" type="text/css" >

And then include the reference to this class using one of the option explained in the documentation:

<li data="addClass:'custom1'">Node with custom class 1 
<li data="icon: 'customDoc1.gif'">Node with standard CSS, but custom icon

You can set up your own custom icons and the path is set as an attribute for the tree: imagePath: "skin-custom/"

Copied most of the lines from the documentation, if anything more specific that you need help with, please elaborate. Hope this gets you going. Thx

Answer 2

Apply this in css In Place of folder-open.gif you place your icon for all expanded folder

 .dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
    {
        background-image: url("folder-open.gif");
        background-repeat:no-repeat;
        background-position:0 0;
    }

In Place of folder.gif you place your icon for all collapseable folder

 .dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
{
    background-image: url("folder.png");
    background-repeat:no-repeat;
    background-position:0 0;
}

For Fileicon

 span.custom span.dynatree-icon
{
   background-image:url('Fileicon.gif'); 
   background-position:0 0;
   background-repeat:no-repeat;
}

Add class in li for file icon. like this

<li id="id2.2.1" data="addClass:'custom'">item2.1.1

Answer 3

Initially set the icon of tree folder and node using appropriate css

var tree = $('#myId').fancytree({
    classNames: {
        folder: 'dynatree-folder'
        nodeIcon: 'icon-16-folder'
    }
});