Adding image before every tree row

Suite and Optimus Suite 5
#1

Hi All,

I have a requirement to load a tree with an image/icon before the expand icon of the tree.

Thanks,
Sailendu

#2

Hi,

Could you attach the picture that shows what you mean ?

#3

Thanks for your reply.
I’ve attached the screen shot.Here i have not used DHTMLX tree.Now i have requirement to implement this tree structure(with arrow icon and the folder icon) with DHTML tree api.
Those icons can contain Onclick functionalities.

Attached screenshot is in .png format.
Thanks again in advance.

#4

It is possible to increase image width. So, there could one image with arrow, folder icon and +/- sign. And there is not possibility to place text between two icons.

  1. Please have a look at the sample. It shows how define with +/- set:

dhtmlxTree/samples/01_appearance/09_tree_design.html

In this case, tree lines must be disabled: tree.enableTreeLines(false);

  1. You need to disable tree images (the second level is without icons):

tree.enableTreeImages(“false”);

  1. tree.def_line_img_x = “50px”; allows to define the width of the space for +/- and lines. It should be set before items are loaded

The other approach to increase icon size dhtmlx.com/docs/products/dht … _size.html and set new +/- icons and folder icons.

#5

Thanks it helps me a lot to set image in my tree text.

But i have idea about smart loading the tree node.Have you any sample code for smart rendering??

My requirement is like below:
1.First retrieve all the parent nodes only, don’t load the child nodes
2.Now while click on ‘+’ icon of parent node i can do some ajax call to load the respective child nodes.
3.Do i need to have the whole tree items as JSON/XML even if i want to load the tree dynamically?

Thanks for any help.

#6

Tree supports dynamic loading:

dhtmlxTree/samples/12_loading_processing_data/13_tree_dyn_loading.html

dhtmlx.com/docs/products/dht … ading.html

The article about this functionality docs.dhtmlx.com/doku.php?id=dhtm … al_loading

#7

Thanks Alex, now I’ve got the idea for dynamic loading of tree data.But i am using Jsp and JSON to load the tree.

Can you help me in loading the tree dynamically using json format.

#8

There is Java connector:
dhtmlx.com/docs/products/dht … ndex.shtml

And its package you may find the sample with dynamic loading of the tree:
tree/02_dynamic_loading.html

#9

Now i am able to load the tree with ajax.But i am having scroll bar for long text(attached screen shot).I tried to make overflow:“hidden” of the tree div, but it didn’t work.Please help me in this regard to disable the horizontal scroll bar and to make long text “text-overflow:ellipsis”(…signs for long texts) and to show tooltip text on mouseover.

Thanks for any help.

#10

You need to place the div with the fixed width as the item text.

In PRO edition you may use itemtext

<![CDATA[

your long text here
]]>

in Standard you need to place html into text attribute - tags < and > must be replaced with &lt: and >

Tooltip can be set by tooltip attribute in the xml.

#11

I am using JSON to create the tree.It is not supporting tooltip attribute.

#12

tooltip is supported in JSON initialization:

{id:1,text:“item 1”,tooltip:“tooltip for the item 1”}