treeview, accordion and updatepanels ;)

Last post 09-20-2007 10:32 PM by Jonathan Shen – MSFT. 3 replies.

Sort Posts:

  • treeview, accordion and updatepanels ;)

    09-18-2007, 5:15 AM
    • Loading...
    • zarzar
    • Joined on 09-18-2007, 8:52 AM
    • Posts 2

    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 Wink

    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 


     

    Filed under: , ,
  • Re: treeview, accordion and updatepanels ;)

    09-20-2007, 5:44 AM
    Answer

    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 an UpdatePanel control:

    For more , please visit:  http://asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

    In your situation, the easiest way is when the FormView changed , a synchronous postback was sent and you made the changes on the server side.  TreeView has no client modal (Dom), so it is hard to operate it on the client side. 

    I hope this help.

    Best regards,

    Jonathan

     

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
  • Re: treeview, accordion and updatepanels ;)

    09-20-2007, 6:00 AM
    • Loading...
    • zarzar
    • Joined on 09-18-2007, 8:52 AM
    • Posts 2

    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 Stick out tongue

    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 ?

  • Re: treeview, accordion and updatepanels ;)

    09-20-2007, 10:32 PM
    Answer

    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="/ControlToolkitTest/WebResource.axd?d=MYZni0kLx_fLYO5SLREkCaFRyyDbYHURF369ULcvgUM1&amp;t=633223348596789238" alt="" /></td><td style="white-space:nowrap;"><a class="CourseFSTreeView_0" href="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. Surprise

    Hope this help.

    Best regards,

    Jonathan

     

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
Page 1 of 1 (4 items)
Microsoft Communities
Page view counter