Multiline nodes in tree

Suite and Optimus Suite 5
#1

Dear,
I have the following problem:

I’d like to enable multiline tree nodes by calling the following code:
…
konzept_tree.enableTreeLines(false);
konzept_tree.enableMultiLineItems(‘600px’);
…

loading the tree work just fine and the linebreak is properly set an the right place. But the second line of the node is not shown in the tree. I use dhtmlx professional edition.

Any Ideas?

#2

Hello
Could you provide us html file and tree structure to reproduce the issue locally?

#3

here you go:

<script type="text/javascript" src="lib/window.js"></script>

<script type="text/javascript" src="ext/dhtmlx26/dhtmlxcommon.js"></script>
<script type="text/javascript" src="ext/dhtmlx26/dhtmlxtree.js"></script>
<script type="text/javascript" src="ext/dhtmlx26/ext/dhtmlxtree_json.js"></script>

<script type="text/javascript">
 // global path for all dhtmlx scripts
 var gImgsPath = 'ext/dhtmlx26/imgs/';
</script>
<textarea id="tree_data" name="tree_data" cols="50" rows="10" >
    [["O1","0","1. Fachliches Angebot"],
    ["bsO1","O1","Für die Lösung technischer Problemstellungen sollen Studierende eine fundierte fachliche Ausbildung sowohl in der Elektrotechnik und Informationstechnik, als auch auf dem Gebiet der Mathematik, Informatik und der Naturwissenschaften erhalten."],
    ["SZ2","O1","1.1 Vorkurse"],
    ["bsSZ2","SZ2","Vorkurse sind Lehrveranstaltungen, die vor Beginn des eigentlichen Studiums den Wissensstand der Studienanfänger ausgleichen, um so gute Voraussetzungen für einen Studienerfolg zu schaffen."],
    ["tp2140","SZ2","1117 (Utschick): Koordinationsstelle Mathematikausbildung"],
    ["tp328","SZ2","3005 (MA Vorkurs): Mathematik Vorkurs für Anfänger"],
    ["SZ3","O1","1.2 Fachtutorien"],
    ["bsSZ3","SZ3","Die Vermittlung von Fachwissen in Vorlesungen wird durch die Betreuung der Studierenden durch studentische Tutoren in kleinen Gruppen erheblich intensiviert."],
    ["tp248","SZ3","1008 (Chakraborty): Tutoren für mehrere Praktika"],
    ["tp249","SZ3","..."]]
</textarea>
<div id="konzept_tree"  style='width:940px; height:425px;border:1px solid grey;'></div>
<script type="text/javascript">
    konzept_tree = new dhtmlXTreeObject("konzept_tree","95%","95%",0);
    konzept_tree.setImagePath(gImgsPath);
    konzept_tree.setSkin('dhx_skyblue');
    konzept_tree.enableTreeLines(false);
    konzept_tree.enableMultiLineItems('680px');
    eval('var z='+document.getElementById("tree_data").value); 
    konzept_tree.loadJSArray(z);
    
    var descriptions = new Array("bsO1","bsSZ2","bsSZ3");
    for(field in descriptions){
        konzept_tree.setIconSize('0','0',descriptions[field]);
    };
</script>
#4

find enclosed a screenshot of the “truncated” tree

treepic.tiff980×238 58.5 KB

#5

Could you, pleace, attach an image again?

#6

treepic.tiff980×238 58.5 KB

is anything wrong with the tiff-file I sent?

Anyway I attached the image again

#7

Can your resave in any othr file format may be? Jpeg?

#8

shure - here you go.

question: does th code work in your environment?

treepic.jpg980×238 64.2 KB

#9

Sorry, are you use 2.6 version (based on your file path)?

#10

yes I do. Is this a problem? I think the nmultiline nodes should work there too, does’nt it? At least the linebreaks work, so it should show the consecutive lines…

#11

It seems like your tree initialization cause this issue: in 3.6 replicates.
dhtmlx.com/docs/products/dht … _line.html - with simple XML structure everithing works.
Please, send completed demo to support@dhtmlx.com with a link to this topic.

#12

dear all,

just in case anybody is interestet: the problem was konzept_tree.setSkin(‘dhx_skyblue’).
with that skin the multiline does not work. It is not a matter of the dhtmlx version. (I meanwhile upgraded tp 3.6)
the solution was to set the skin to ‘default’.

then it works properly!

#13

Oh, sorry!
You can’t achieve multiline in skyblue skin because it uses a gradient-picture background selection.
In this case if you need orange selection, you can set it in CSS:
.selectedTreeRow {
background-color: #FFC000 !important;
}