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

Loading panel with asp:UpdatePanel

14 Answers 1033 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 26 Feb 2009, 11:00 AM
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.

14 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 26 Feb 2009, 11:53 AM
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.
0
Jan
Top achievements
Rank 1
answered on 26 Feb 2009, 12:54 PM
Hi Daniel,

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



Regards,
Jan
0
IQworks
Top achievements
Rank 1
answered on 28 Jun 2009, 02:28 AM

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.

0
Daniel
Telerik team
answered on 02 Jul 2009, 10:34 AM
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.
0
Merritt
Top achievements
Rank 1
answered on 04 Apr 2012, 09:25 PM
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.
0
Munna
Top achievements
Rank 1
answered on 27 Oct 2012, 04:57 AM
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..
0
Peeyush
Top achievements
Rank 1
answered on 08 Jan 2013, 08:43 AM
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>
0
Princy
Top achievements
Rank 2
answered on 08 Jan 2013, 09:11 AM
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.
0
Peeyush
Top achievements
Rank 1
answered on 09 Jan 2013, 03:01 AM
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.
0
Princy
Top achievements
Rank 2
answered on 09 Jan 2013, 05:04 AM
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.
0
Peeyush
Top achievements
Rank 1
answered on 09 Jan 2013, 05:56 AM
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
0
Princy
Top achievements
Rank 2
answered on 10 Jan 2013, 02:43 AM
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.
0
Peeyush
Top achievements
Rank 1
answered on 10 Jan 2013, 07:01 AM
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
0
Rob
Top achievements
Rank 1
answered on 27 Feb 2013, 02:34 PM
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.
Tags
Ajax
Asked by
Jan
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Jan
Top achievements
Rank 1
IQworks
Top achievements
Rank 1
Merritt
Top achievements
Rank 1
Munna
Top achievements
Rank 1
Peeyush
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Rob
Top achievements
Rank 1
Share this question
or