CODEWITHSUNDEEP
jquerytreeview
Prasad
Prasad

Reputation: 59491

avoid treeview collapse on click of treeview text in jquery

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

Upvotes: 4

Views: 3745

Answers (2)

Ben Griswold
Ben Griswold

Reputation: 18331

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.

Upvotes: 10

PetersenDidIt
PetersenDidIt

Reputation: 25620

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
});

Upvotes: 0

Related Questions