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

Loading panel with asp:UpdatePanel

14 Answers 1277 Views

Ajax

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

14 Answers, 1 is accepted

Accepted

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.

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%;">

<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.

answered on 02 Jul 2009, 10:34 AM

david-loadingpanel.zip

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.

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>

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.

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.

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.

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.

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

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.