Problems with tree

[ayanbizzMember]


$(document).ready(function () {
var theme = getTheme();
// Create jqxTree
$('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: theme });
});


<div id='jqxTree' style='float: left; margin-left: 20px;'>
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
<ul>
<li>Web conferencing1</li>
<li>Web conferencing2</li>
</ul>
</ul>
</div>

I used the following code to create the tree view but problem is that I can’t see the left hand side arrows in the treeview and also I want to change the backgroud color of the treeview and I tried to do so in the style attribute of the div tag but it did not take any effect

[ayanbizzMember]

[Peter StoevKeymaster]

Hi ayanbizz,

The HTML structure seems to be not correct.

<div id='jqxTree' style='float: left; margin-left: 20px;'>
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing
<ul>
<li>Web conferencing1</li>
<li>Web conferencing2</li>
</ul>
</li>
</ul>
</div>

To change the Tree’s background, you can edit the .jqx-tree and .jqx-widget-content styles in the CSS.
Another approach is to set the background with code.

For example:

$("#jqxTree").css('background', '#ffbbaa');
$("#jqxTree .jqx-widget-content").css('background', '#ffbbaa');

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ayanbizzMember]

@Peter Stoev thanks for replying .Now ,I can change the background color of the tree view but I am not understanding what is wrong with the html code above.

[Peter StoevKeymaster]

Hi ayanbizz,

A tree item is defined with LI tag. If you want to define sub-items for a tree item, then you need to define the UL before you close the LI tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts