Show Loading Panel when exanding all

[JNG]

I have a TreeView and buttons to expand and collapse the tree within an AjaxPanel.

When the Expand or Collapse button is clicked, I call a js function to perform the action.  However, there's a slight delay and it looks like nothing is occurring.  

I'd like to show the Loading Panel over the TreeView at this time.  I've seen the demo to explicitly show the LoadingPanel but that does not seem to be working.  In our application, the treeview will either use load on demand or client side loading.  I can get the Loading panel to appear for the LOD tree. But when the tree is loading client side, the Loading Panel does not appear.  I assume because there is no postback?  

How can I get the panel to appear in this case?

[JNG]

condensed code: 

<!-- Loading Panel AJAX Scripts -->
 <script type="text/javascript">

     var bExpandAll = false;

     function treeCollapseAllNodes() {

         var treeView = $find("<%= RadTreeView1.ClientID %>");
         if (treeView != null)
         {
             var nodes = treeView.get_allNodes();
             for (var i = 0; i < nodes.length; i++) {
                 if (nodes[i].get_nodes() != null) {
                     nodes[i].collapse();
                 }
             }
         }
         SetCookie('<%=NodeAllExpandedCookie %>', '0');
     }

     function treeExpandAllNodes() {
         bExpandAll = true;

         var treeView = $find("<%= RadTreeView1.ClientID %>");
         var nodes = treeView.get_allNodes();
         if (nodes != null)
         {
             for (var i = 0; i < nodes.length; i++) {
                 if (nodes[i]._hasChildren()) {
                     nodes[i].expand();
                 }
             }

         }

         SetCookie('<%=NodeAllExpandedCookie %>', '1');
     }

     var currentLoadingPanel = null;
     var currentUpdatedControl = null;

     function requestStart(sender, args) {

         if (bExpandAll)
         {
             currentLoadingPanel = $find("<%= radPanelLoading.ClientID%>");
             var ctrl = $find("<%= RadTreeView1.ClientID%>");

             if (args.get_eventTarget() == "<%= RadTreeView1.UniqueID %>") {
                 ctrl.set_enabled(false); //only works with this line

                 currentUpdatedControl = "<%= RadTreeView1.ClientID %>";
                 //show the loading panel over the updated control
                 currentLoadingPanel.show(currentUpdatedControl);
             }
             currentLoadingPanel.hide(currentUpdatedControl);
         }
     }
     function responseEnd() {
         if (bExpandAll)
         {
             //hide the loading panel and clean up the global variables
             if (currentLoadingPanel != null) {
                 currentLoadingPanel.hide(currentUpdatedControl);
             }
             currentUpdatedControl = null;
             currentLoadingPanel = null;
         }
         bExpandAll = false;
     }
 </script>

 

<rad:RadAjaxManager ID="RadAjaxManager1" runat="server">

             <AjaxSettings>

            <rad:AjaxSetting AjaxControlID="RadTreeView1">

                <UpdatedControls>

                <rad:AjaxUpdatedControl ControlID="btnExpand" LoadingPanelID="radLoadingPanel" />

                <rad:AjaxUpdatedControl ControlID="btnCollapse" LoadingPanelID="radLoadingPanel" />

                <rad:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="radLoadingPanel" />

                </UpdatedControls>

            </rad:AjaxSetting>

        </AjaxSettings>

        <ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd"></ClientEvents>

    </rad:RadAjaxManager>

[JNG]

Any help with this?

[Ivan Danchev]

Hello,

When attached to a control the RadAjaxLoadingPanel will show up when the control gets updated through an AjaxRequest. To make the LoadingPanel show() and hide() methods in the requestStart and responseEnd handlers you can set the AutoPostBack properties of the two buttons you use to expand/collapse the nodes to "true" and add them to the AjaxManager's settings:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
     <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadTreeView1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="btnExpand" LoadingPanelID="radLoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="btnCollapse" LoadingPanelID="radLoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="radLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnExpand">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="radLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnCollapse">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="radLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd"></ClientEvents>
</telerik:RadAjaxManager>

Another thing I noticed that you could check out is the LoadingPanel's ID you use in the requestStart handler: it is "radPanelLoading", while everywhere else it is "radLoadingPanel".

Regards,
Ivan Danchev
Telerik