[Solved] Do not collapse node on treeview.expand if already expanded

[Donna Stewart]

Hi,

When I call treeview.expand(item), if the node is already expanded, it will be collapsed.  How can I keep that from happening?  I was thinking I could check if the node is expanded, don't call treeview.expand(item), but I'm not sure how to check if the node is expanded in javascript.  Your help is very much appreciated.

Thank you,
Donna

[Dimo]

Hi Donna,

You seem to be using a very old version of the MVC extensions, as the described behavior has been changed in March 2010. Now expand() only expands nodes, as can be seen on the online demo:

http://demos.telerik.com/aspnet-mvc/treeview/clientsideapi

In your case you can check whether the item's DOM element ( li.t-item ) has a ul.t-group child which is visible (does not have a display:none style).

Regards,
Dimo
the Telerik team

[Donna Stewart]

UPDATE:  Just in case anyone else has this issue -  I have discovered that when the node is expanded and then collapsed, it does indeed have a display:none style, so I have changed my javascript code to determine if the node is expanded using this:

if (cb.children('ul.t-group').length < 1 || cb.children('ul.t-group').css("display") == "none") {

Original reply:

Believe it or not, I am using the very latest version - 2011.1.414.  I looked at the online demo and I see what you are talking about, but strangely enough, when I call expand on a treeview node, and the node is already expanded, it is collapsed.  I know this is what is happening, because I took that line of code out and the node stayed expanded.  When I put it back in, the node is collapsed.  So, I tried your suggestion -  check whether the item's DOM element ( li.t-item ) has a ul.t-group child which is visible (does not have a display:none style) - and this didn't work exactly.  Using Firebug, I saw where the ul.t-group child's style is not set to anything - here's a copy of that html from Firebug :

<ul style="" class="t-group"><li class="t-item"><div class="t-top"><span class="t-checkbox"><input type="hidden"
class="t-input" name="UserGroupNames_checkedNodes.Index" value="18:0"><input type="checkbox"
name="UserGroupNames_checkedNodes[18:0].Checked" class="t-input" value="False"></span>
<span class="t-in"><span style="color: rgb(43, 224, 27);">BRAD HARRISON</span></span><input type="hidden"
value="3" name="itemValue" class="t-input"></div></li><li class="t-item t-last"><div class="t-bot">
<span class="t-checkbox"><input type="hidden" class="t-input" name="UserGroupNames_checkedNodes.Index"
value="18:1"><input type="checkbox" name="UserGroupNames_checkedNodes[18:1].Checked" class="t-input"
value="False"></span><span class="t-in"><span style="color: Red;">Kerryanne Johnston</span></span>
<input type="hidden" value="94" name="itemValue" class="t-input"></div></li></ul>

So, I am just checking to see if the element has any children of 'ul.t-group' -

 

 

if (cb.children('ul.t-group'

).length < 1) {

 

 

treeview.expand(cb);

 

}

 

where cb is $(el).closest('.t-item');
This works!

Thank you for your help.
Donna