avoid treeview collapse on click of treeview text in jquery

Question

I need to avoid the collapse of jquery treeview on click of treeview links/text.

For example, if i am showing a list of directories/subdirectories in treeview, I need to collapse the treeview only while clicking the +/- image and not on clicking the directories

Answer 1

Bind your click event to the +/- image rather then the container that contains the image and the directory text.

So if your HTML looks like this:

<ul class="dir-list">
    <li>
        <div><img class="expand" src="expand.gif" /><span>Directory Name</span></div>
        <ul>
            <li><div><img class="expand" src="expand.gif" /><span>Sub Directory Name</span></div></li>
        </ul>
    </li>
</ul>

You would bind your click to the image by doing:

$('.dir-list img.expand').click(function(){
    //Do stuff here to expand or collapse the area
});

Answer 2

You'll need to update the treeview javascript code itself. For Treeview 1.4, comment out the following lines (66-68):

this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
    toggler.apply($(this).next());
}).add( $("a", this) ).hoverClass();

This will ensure expand/collapse only occurs on the +/- click. The expand all and collapse all feature will continue to work as well, if applicable.

Better yet, you provide a new argument when defining the tree and only if the condition is satisfied do you override the default functionality. For example,

if (settings.expandMode != 'simple'){
    this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
        toggler.apply($(this).next());
    }).add( $("a", this) ).hoverClass();
}

And your treeview definition might look like this:

$("#tree").treeview({
    animated: "fast",
    persist: "cookie",
    collapsed: true,
    control: "#treecontrol",
    expandMode: "simple" // custom - only toggles per the +/- icon      
})

Hopefully you get the idea. Good luck.