treeview, accordion and updatepanels ;)

hello, here is my problem, i'll try to explain my page structure

on my site, i use treeviews (filled by code from hierarchical database) in several accordion panes to navigate on my page

so, i've :

<cc1:Accordion ...>

<Panes>

<cc1:AccordionPane>

<asp:TreeView>...</asp:TreeView>

</cc1:AccordionPane>

.. 2nd pane with a treeview, and so on...

</Panes>

</cc1:Accordion>

my accordion acts like a "menu" to choose which type of data you want to browse

when my user clicks on a node of one of my treeviews (the one which is in the active accordion pane obviously), it sets the value of an HiddenField to the selected node value

in the main part of the page, i've a formview which displays data (with the select parameter bound to the hiddenfield value)

and it's works

but sometimes, some data changes made in the formview need to be done in the treeviews too (node label for instance)

but I don't how to do that

currently, my treeviews are in an accordion which is NOT is an updatepanel

but if i put the accordion (containing the treeviews) is an updapanel, it don't work, clearly there is a problem with the HiddenField (which links treeviews and formview)

I've tried to put the hiddenfield at different level (inside/outside the updatepannel), no result

please help me to choose a nice way to "ajax"-reload treeviews inside accordion on item updated event of the formview

thanks

Hi Zarzar,

My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

As far as I know, TreeView is incompatible with UpdatePanel.

Controls that Are Not Compatible with UpdatePanel Controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside anUpdatePanel control:

TreeView andMenu controls.

Web Parts controls. For more information, seeASP.NET Web Parts Controls.

FileUpload controls when they are used to upload files as part of an asynchronous postback.

GridView andDetailsView controls when their EnableSortingAndPagingCallbacks property is set totrue. The default isfalse.

Login,PasswordRecovery,ChangePassword, andCreateUserWizard controls whose contents have not been converted to editable templates.

TheSubstitution control.

Validation controls, which includes theBaseCompareValidator,BaseValidator,CompareValidator,CustomValidator,RangeValidator,RegularExpressionValidator,RequiredFieldValidator, andValidationSummary control.

thanks for answering

Jonathan Shen – MSFT:

My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

well, perfect understanding!

it seems clear that Treeview is not the best friend of UpdatePanel

if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Hi Zarzar,

zarzar:

if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Yes, as far as I know. It is the easiest way though not your willing.

Another way is use Javascript to find the Node and change its CSS style to make it as "selected", when the FormView is modified and a synchronous postback has been lauched. (Make sure that you have removed the TreeView out of the UpdatePanel).

See here is the generated HTML of a TreeNode.

<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="http://pics.10026.com/?src=/ControlToolkitTest/WebResource.axd?d=MYZni0kLx_fLYO5SLREkCaFRyyDbYHURF369ULcvgUM1&t=633223348596789238" alt="" /></td><td style="white-space:nowrap;"><a class="CourseFSTreeView_0" href="http://links.10026.com/?link=javascript:__doPostBack('CourseFSTreeView','sMy Computer\\Favorites\\Technology\\Microsoft')" onclick="TreeView_SelectNode(CourseFSTreeView_Data, this,'CourseFSTreeViewt6');" id="CourseFSTreeViewt6">Microsoft</a></td>
</tr>
</table>

You can use Javascript to get all <a> element by using document.getElementByTagName("a") , then find the selected item by traversing the array(for example , use a.innerText =="Microsoft"). Now, you can change its CSS style(Make sure not to click on it , or it will be refreshed by sending a postback).

This solution sounds great ,but it is so complex to give a whole sample. We should consider the cross-browser issues. For example in IE we can use a.innerText , but we should use a.textContent on Firefox.

So , in my opnion , you should take the former one. Good luck.

Hope this help.

Best regards,

Jonathan