Loading panel with asp:UpdatePanel

15 posts, 1 answers
  1. Jan
    Jan avatar
    10 posts
    Member since:
    Jul 2008

    Posted 26 Feb 2009 Link to this post

    Hello,

    I have to use asp:UpdatePanel in one part of my application. Is it still possible to show the telerik loading panel when it updates?
    Unfortunately I couldn't find anything about it.

    Thanks in advance.
  2. Answer
    Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 26 Feb 2009 Link to this post

    Hello Jan,

    It is possible, although we recommend you use RadAjaxPanel or RadAjaxManager.
    <script language="javascript" type="text/javascript"
     
        var loadingPanel = ""
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance(); 
        var postBackElement = ""
        pageRequestManager.add_initializeRequest(initializeRequest); 
        pageRequestManager.add_endRequest(endRequest); 
     
        function initializeRequest(sender, eventArgs) 
        { 
            loadingPanel = $find("RadAjaxLoadingPanel1"); 
            postBackElement = eventArgs.get_postBackElement().id; 
            loadingPanel.show(postBackElement); 
        } 
     
        function endRequest(sender, eventArgs) 
        { 
            loadingPanel = $find("RadAjaxLoadingPanel1"); 
            loadingPanel.hide(postBackElement); 
        } 
     
    </script> 
     
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
            style="border: 0;" /> 
    </telerik:RadAjaxLoadingPanel> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
        <ContentTemplate> 
            <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Telerik" DataSourceID="SqlDataSource1" 
    ... 

    Hope this helps.

    Regards,
    Daniel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jan
    Jan avatar
    10 posts
    Member since:
    Jul 2008

    Posted 26 Feb 2009 Link to this post

    Hi Daniel,

    I had to use $find('<% = RadAjaxLoadingPanel1.ClientID %>') instead of $find('RadAjaxLoadingPanel') but now it works great :)
    Thanks!



    Regards,
    Jan
  5. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 27 Jun 2009 Link to this post

    Because of other limitations at the moment, I have to use updatepanels instead of radajaxpanel. When I run the loadingpanel with radajaxpanel, I get my radloadingpanel centered nicely in the grid with this code ..... 

     

     

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="5">
    <table style="width: 100%; height: 100%;">

     

     

    <tr style="height: 100%">

     

     

    <td align="center" valign="middle" style="width: 100%">

     

     

    <asp:Image ID="Image2" ImageUrl="~/mybodyscience/iqimages/Loading_Images/loading3.gif"

     

     

    BorderWidth="0px" Height="45px" Width="145px" AlternateText="Processing Data ...."

     

     

    runat="server"></asp:Image>

     

     

    </td>

     

     

    </tr>

     

     

    </table>

     

     

    </telerik:RadAjaxLoadingPanel>

     

     

     

    But, with updatepanels, I cannot seem to get it centered ? Is there anyway to center the radloadingpanel while using updatepanel ?
    thanks.

  6. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 02 Jul 2009 Link to this post

    Hello David,

    Please test the attached example and let me know whether it behaves as expected on your side.

    Regards,
    Daniel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 04 Apr 2012 Link to this post

    Old thread, but there needs to be some clarification:

    postBackElement = eventArgs.get_postBackElement().id;

    Is not going to give most people their desired behavior.  It should be the id of the control on which you want to put the loading panel, not the control which caused the post back. In most scenarios, the control which caused the async postback will be a button and this solution will put the loading panel over that button. Use something like this:

    postBackElement = "<%= Panel1.ClientID %>"; 

    Panel1 here is the container on where the loading panel should cover.
  8. Munna
    Munna avatar
    3 posts
    Member since:
    Apr 2012

    Posted 26 Oct 2012 Link to this post

    Worked fine for the controls which are placed in update panel but if the page is being posted then this condition fails. If directly going into endRequest but not in to initializeRequest..
  9. Peeyush
    Peeyush avatar
    17 posts
    Member since:
    Feb 2012

    Posted 08 Jan 2013 Link to this post

    Hello Daniel,

    I tried the same thing which you suggested, but cannot figure out why the loading panel does not occur, i am creating the radtab from codebehind, on radtabclick also the loading panel does not occur below is my code

           <asp:Timer runat="server" id="UpdateTimer" />
            <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Always">
                <Triggers>
                    <asp:AsyncPostBackTrigger controlid="UpdateTimer"
                      eventname="Tick" />
                </Triggers>
                <ContentTemplate>
                 <telerik:RadTabStrip ID="tabSocialNetwork" runat="server" SelectedIndex="0" MultiPageID="radMultiPage"
                ScrollChildren="true" OnTabClick="RadTab_SearchScreen"> </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="radMultiPage" runat="server" SelectedIndex="0" Width="100%" Height="500px" OnPageViewCreated="RadMultiPage1_PageViewCreated">
             </telerik:RadMultiPage>

            </ContentTemplate>
            </asp:UpdatePanel>
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2013 Link to this post

    Hi,

    Try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'  style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>
    <asp:Timer runat="server" ID="UpdateTimer" />
    <asp:UpdatePanel runat="server" ID="TimedPanel" UpdateMode="Always">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="UpdateTimer" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <telerik:RadTabStrip ID="tabSocialNetwork" runat="server" SelectedIndex="3" AutoPostBack="true" ScrollChildren="True">
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="radMultiPage" runat="server" SelectedIndex="0" Width="100%" Height="500px">
            </telerik:RadMultiPage>
        </ContentTemplate>
    </asp:UpdatePanel>

    JS:
    <script language="javascript" type="text/javascript">
     
        var loadingPanel = "";
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
        var postBackElement = "";
        pageRequestManager.add_initializeRequest(initializeRequest);
        pageRequestManager.add_endRequest(endRequest);
     
        function initializeRequest(sender, eventArgs) {
            loadingPanel = $find("RadAjaxLoadingPanel1");
            postBackElement = eventArgs.get_postBackElement().id;
            loadingPanel.show(postBackElement);
        }
     
        function endRequest(sender, eventArgs) {
            loadingPanel = $find("RadAjaxLoadingPanel1");
            loadingPanel.hide(postBackElement);
        }
      
    </script>

    Hope this helps.

    Regards,
    Princy.
  11. Peeyush
    Peeyush avatar
    17 posts
    Member since:
    Feb 2012

    Posted 08 Jan 2013 Link to this post

    Hello Princy,


          <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxPanelTimed">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelTimed" LoadingPanelID="LoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <asp:Timer runat="server" ID="UpdateTimer" Interval="40000" />
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelTimed" OnAjaxSettingCreating="RadAjaxPanelTimed_AjaxSettingCreating" >
                <telerik:RadTabStrip ID="tabSocialNetwork" runat="server" OnClientTabSelecting="OnClientTabSelecting" SelectedIndex="0" MultiPageID="radMultiPage"
                   OnTabClick="OnRadTab_SocialAccountClick">
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="radMultiPage" runat="server" RenderSelectedPageOnly="true" SelectedIndex="0" Width="100%"
                    Height="500px" OnPageViewCreated="RadMultiPage1_PageViewCreated">
                </telerik:RadMultiPage>
            </telerik:RadAjaxPanel>
      
      
      
    CodeBehind:
      
      
    #region Load Event
            protected void Page_Load(object sender, EventArgs e)
            {
      
                if (!IsPostBack)
                {
                    objSocialNetworkBF = new SocialNetworkBF();
                    DataTable dtSocialAccount = objSocialNetworkBF.GetSocialAccount(compId, userId);
                    ViewState["SocialAccount"] = dtSocialAccount;
                    txtMessage.Attributes.Add(PureAnalyzer_WebApp.Onkeydown, PureAnalyzer_WebApp.EnterKeyPrevent);
                    btnSendItNow.Attributes.Add(PureAnalyzer_WebApp.Onkeydown, PureAnalyzer_WebApp.EnterKeyPrevent);
                    if (dtSocialAccount != null && dtSocialAccount.Rows.Count > 0)
                    {
                        foreach (DataRow dr in dtSocialAccount.Rows)
                        {
                            SocialAccId = dr["SocialAccId"].ToString();
                            SocialAccount = dr["SocialAccount"].ToString();
                            AddTab(dr["SocialAccountScreenName"].ToString() + PureAnalyzer_WebApp.OpenBracket + dr["SocialAccount"].ToString() + PureAnalyzer_WebApp.ClosedBracket);
                            
                        }
                       // UpdateTimer.Interval = 60000;
                    }
      
                }
            }
      
            #endregion
            #region Add radtab
            private void AddTab(string tabName)
            {
                  
                RadTab tab = new RadTab();
                tab.Text = tabName;
                //tab.PostBack = true;
                tab.Value = tabName + "(" + SocialAccId + ")";
                tabSocialNetwork.Tabs.Add(tab);
                tab.ToolTip = tabName;
      
                if (flag)
                {
                    AddPageView(tab);
                    flag = false;
                }
            }
            #endregion
      
            #region OnRadTab click event
            protected void OnRadTab_SocialAccountClick(object sender, RadTabStripEventArgs e)
            {
                AddPageView(e.Tab);
                e.Tab.PageView.Selected = true;
            }
            #endregion
      
            #region Method to add pageview
            private void AddPageView(RadTab tab)
            {
                RadPageView pageView = new RadPageView();
                Guid pageViewGuid;
                pageViewGuid = Guid.NewGuid();
                string[] strAccVal = tab.Value.Split('(');
                pageView.ID = strAccVal[1].Remove(strAccVal[1].IndexOf(')')) + "," + strAccVal[2].Remove(strAccVal[2].IndexOf(')')) + "," + pageViewGuid.ToString();
                radMultiPage.PageViews.Add(pageView);
                tab.PageViewID = pageView.ID;
            }
            #endregion
      
            #region Rad multipage view created
            int Iteration = 0;
            protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
            {
                string []strPageviewID = e.PageView.ID.Split(',');
      
                if (!IsPostBack)
                {
                    if (strPageviewID[0] == "Twitter")
                    {
                        string userControlName = "TwitterConnect.ascx";
                        Control userControl = Page.LoadControl(userControlName);
                        Guid userControlTwitterGuid = Guid.NewGuid();
                        userControl.ID = userControlTwitterGuid.ToString() + "," + strPageviewID[1];
                        e.PageView.Controls.Add(userControl);
                    }
                    else if (strPageviewID[0] == "FaceBook")
                    {
                        string userControlName = "FacebookConnect.ascx";
                        Control userControl = Page.LoadControl(userControlName);
                        Guid userControlFacebookGuid = Guid.NewGuid();
                        userControl.ID = userControlFacebookGuid.ToString() + "," + strPageviewID[1];
                        e.PageView.Controls.Add(userControl);
                    }
                }
                else
                {
                    if (strPageviewID[0] == "Twitter")
                   {
                       string userControlName = "TwitterConnect.ascx";
                       Control userControl = Page.LoadControl(userControlName);
                       Guid userControlTwitterGuid = Guid.NewGuid();
                       userControl.ID = userControlTwitterGuid + "," + strPageviewID[1];
                       e.PageView.Controls.Add(userControl);
                       Iteration++;
                   }
                    else if (strPageviewID[0] == "FaceBook")
                   {
                       string userControlName = "FacebookConnect.ascx";
                       Control userControl = Page.LoadControl(userControlName);
                       Guid userControlFacebookGuid = Guid.NewGuid();
                       userControl.ID = userControlFacebookGuid + "," + strPageviewID[1];
                       e.PageView.Controls.Add(userControl);
                       Iteration++;
                   }
                     
                }
                  
            }
            #endregion
      
            #region RadPanel Ajaxsetting created
            protected void RadAjaxPanelTimed_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
            {
                AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
                trigger.ControlID = UpdateTimer.ID;
                trigger.EventName = "Tick";
                e.UpdatePanel.UpdateMode = UpdatePanelUpdateMode.Always;
                e.UpdatePanel.Triggers.Add(trigger);
            }
            #endregion
    Thanks for your help, i tried this too but it was of no help, in this case the Loading panel did not occur at all, after all these problem being faced i tried to to get rid of asp update panel and used RadAjaxPanel instead,now in this case first time the page is loaded everything works well and when i try selecting a different tab the loading panel occurs and the page gets loaded correctly but after that i am not able to doanything no postback occurs( on Tab click, no event fires it seems that page freezes), i can not figure out where am i going wrong.
  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2013 Link to this post

    Hi Peeyush,

    Please try setting the AutoPostBack property of RadTabStrip to true. Following is the sample code that worked as expected at my end.

    ASPX:
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" AnimationDuration="1000" BackImageUrl="~/Images/loding.gif">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanelTimed">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelTimed" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelTimed">
        <telerik:RadTabStrip ID="tabSocialNetwork" runat="server" SelectedIndex="0" MultiPageID="radMultiPage" AutoPostBack="true">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="radMultiPage" runat="server" RenderSelectedPageOnly="true" SelectedIndex="0" Width="100%" Height="500px">
        </telerik:RadMultiPage>
    </telerik:RadAjaxPanel>

    Note: Here you can show the RadAjaxLoadingPanel without using asp:Timer.

    Hope this helps.

    Regards,
    Princy.
  13. Peeyush
    Peeyush avatar
    17 posts
    Member since:
    Feb 2012

    Posted 08 Jan 2013 Link to this post

    Hello Princy,

    I have to use asp timer control, as i need to refresh my page at a particular time interval, is it not possible to achieve as desired using the asp timer control.

    Thanks!

    with regards,
    Peeyush Pandey
  14. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jan 2013 Link to this post

    Hi,

    Try the following code snippet.

    ASPX:
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" AnimationDuration="1000" BackImageUrl="~/Images/loding.gif">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanelTimed">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelTimed" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
          <telerik:AjaxSetting AjaxControlID="UpdateTimer">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelTimed" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Timer runat="server" ID="UpdateTimer" Interval="40000" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelTimed">
        <telerik:RadTabStrip ID="tabSocialNetwork" runat="server" SelectedIndex="0" MultiPageID="radMultiPage"   AutoPostBack="true">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="radMultiPage" runat="server" RenderSelectedPageOnly="true" SelectedIndex="0" Width="100%" Height="500px">
        </telerik:RadMultiPage>
    </telerik:RadAjaxPanel>

    Hope this helps.

    Regards,
    Princy.
  15. Peeyush
    Peeyush avatar
    17 posts
    Member since:
    Feb 2012

    Posted 10 Jan 2013 Link to this post

    Hello Princy,

    Thanks for your reply.

    I have one more problem, I have implemented Load on demand radpageview considering the telerik example for the same, in which i have used the OnClientTabSelecting="onTabSelecting" event, the problem with this is that the already loaded pageview for the previously selected tab do not load ( as it cancels the postback), how can i overcome this situation,

            function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }

    Note - i am also using async postback also using the timer control to refresh the page at a predefined time interval.

    Please suggest.

    Thanks!


    with regards,
    Peeyush pandey
  16. Rob
    Rob avatar
    27 posts
    Member since:
    Oct 2012

    Posted 27 Feb 2013 Link to this post

    I wanted to add what I modified/used to get my update panels utilizing the radajaxloadingpanel.  Basically I'm relying on the dynamic ID's and a regular expression to get the update panel id and place the radloadingpanel over it.

    var loadingPanel = "";
    var postBackElement = "";
    var addedToLoad = false;
     
    function pageLoad(sender, eventArgs) {
        if (!addedToLoad) {
            var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
            pageRequestManager.add_initializeRequest(initializeRequest);
            pageRequestManager.add_endRequest(endRequest);
            addedToLoad = true;
        }
    }
     
    function initializeRequest(sender, eventArgs) {
        loadingPanel = $find('<%= loadingPanel.ClientID %>');
        var panels = eventArgs.get_updatePanelsToUpdate();
        var updatePanelId = panels[0];
        if (updatePanelId != null) {
            postBackElement = updatePanelId.replace(/\$/g, '_');
            loadingPanel.show(postBackElement);
        }
    }
     
    function endRequest(sender, eventArgs) {
        loadingPanel = $find('<% = loadingPanel.ClientID %>');
        loadingPanel.hide(postBackElement);
    }

    Hope this helps someone in the future.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017