ASP.NET TreeView javascript before postback

Question

I am trying to encode what, in my opinion, is a pretty ordinary AJAX template using TreeViews and UpdatePanels. My situation is this:

I have a TreeView in UpdatePanel. I have Literal inside another UpdatePanel. When a user clicks on a node inside a TreeView, the contents of Literal are updated. Now, since all this is asynchronous, there is a temporary lag between clicking and updating Literal content. During this time, I would like to do two things:

1) Show UpdateProgress and

2) Clear Literal Content

This means that the user does not need to look at the old content while the new text is loaded asynchronously.

I cannot find an easy way to accomplish (2). I read client-side callbacks and used GetCallbackEventReference, but this seems like a very complex approach to what seems like a simple problem.

Ideally, I would like to leave TreeView on my own for it to work. I do not want to get the content myself and add them to the TreeView using JS. I just wanted to detect the client side node change event, clear Literal, and let TreeView continue its normal operation.

Is it possible? Or does a client call support my only option?

Answer 1

You will want to play with the PageRequestManager from the ASP.NET AJAX library. Here's the MSDN link for PRM - http://msdn.microsoft.com/en-us/library/bb311028.aspx .

As a warning only, Microsoft stated that TreeView can be problematic in UpdatePanel, and you will also want to be very careful about performance , especially if you have a large TreeView (see my article on UpdatePanel performance optimization - http: //www.aaron-powell .com / blog.aspx? id = 1195 ). You should really look at something like a jQuery plugin (for example: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ ).

But to answer your question you need:

• You have a BeginRequest event BeginRequest that will then clear your literal and may even show the load (I'm not a fan of UpdateProgress, I prefer the much more granular control that I get from this).
• Use the EndRequest event to verify that the Download component disappears.

You can also make TreeView a AsyncPostbackTrigger second UpdatePanel on the page or just call the Update method on it during the async postback of the TreeView

Answer 2

I had the same problem and fixed it by creating a hidden html element that overlaps the area I want to hide. I show it onSubmit and hide it in window.onload during postback. This is ugly, but it works and should be fast.