Show Loading Panel when exanding all

4 posts, 0 answers
  1. JNG
    JNG avatar
    10 posts
    Member since:
    Jul 2012

    Posted 28 Oct 2015 Link to this post

    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?

  2. JNG
    JNG avatar
    10 posts
    Member since:
    Jul 2012

    Posted 28 Oct 2015 Link to this post

    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>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JNG
    JNG avatar
    10 posts
    Member since:
    Jul 2012

    Posted 02 Nov 2015 Link to this post

    Any help with this?
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 02 Nov 2015 Link to this post

    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
Back to Top