This is a migrated thread and some comments may be shown as answers.

Show Loading Panel when exanding all

3 Answers 46 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
JNG
Top achievements
Rank 1
JNG asked on 28 Oct 2015, 03:34 PM

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?

3 Answers, 1 is accepted

Sort by
0
JNG
Top achievements
Rank 1
answered on 28 Oct 2015, 03:39 PM

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>

0
JNG
Top achievements
Rank 1
answered on 02 Nov 2015, 02:22 PM
Any help with this?
0
Ivan Danchev
Telerik team
answered on 02 Nov 2015, 03:02 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TreeView
Asked by
JNG
Top achievements
Rank 1
Answers by
JNG
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or