Run javascript code after TreeView TreeNodePopulate event

Question

I have a TreeView control that is inside an UpdatePanel. I am trying to show an Ajax-style "please wait" animated GIF while the TreeView loads (it can be slow depending on how much data). To show the GIF I have a modal overlay DIV to grey out the background and another DIV to hold the GIF.

I have managed to show the modal overlay by attaching some jQuery to the click event on the TreeView like so:

SubMenuFoldersTreeView.Attributes.Add("onclick", "$('.modalOverlay').show(); $('.pleaseWait').show();");

This causes the modal overlay to appear when a user expands a tree node - ok so far.

The problem I have is I cannot make the modal overlay disappear after the TreeView has finished populating a node. I tried attaching some javascript like so to the TreeNodePopulate event:

protected void SubMenuFoldersTreeView_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    PopulateSubMenuSubLevelFolders(Convert.ToInt64(e.Node.Value), e.Node);

    ScriptManager.RegisterClientScriptBlock(this, GetType(), "start", "alert('hello');", true);
}

However this does not seem to get added into the page.

PrzemG PrzemG · Accepted Answer · 2014-04-10T10:44:05

Have you tried to add ajax 'UpdateProgress' inside UpdatePanel that contains treeview? It will handle showing/hiding for you. All you have to do is to specify 'PrgressTemplate'.

If you have nested UpdatePanels remember to add attribute UpdateMode="Conditional" to each.

EDIT: I understand that you want to show 'please wait' when you expand/collapse nodes using +/- button?

If yes, try this: Once page is loaded run jquery (you can use ajax pageLoad function) that assigns function to onclick event to each collapse/expand image inside tree view container. Function should accept one parameter which is id of div containing nodes that are displayed/hidden when image is clicked (it is the same as id of element containing image with 'Nodes' string added at the end).

Inside that function show your update progress message and get div element containing nodes by id (id passed as parameter) and call second function passing that id and current style.display value of div containing nodes.

In second function check if current style.display value of div is the same as value passed in parameter if it is the same call the same function with 100 ms timeout if it isn't - hide your 'please wait' message.

Run javascript code after TreeView TreeNodePopulate event

1 Answers