Loading panel with asp:UpdatePanel

[Jan]

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.

[Daniel]

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.

[Jan]

Hi Daniel,

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



Regards,
Jan

[IQworks]

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.

[Daniel]

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.

[Merritt]

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.

[Munna]

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

[Peeyush]

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>

[Princy]

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.

[Peeyush]

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.

[Princy]

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.

[Peeyush]

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

[Princy]

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.

[Peeyush]

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

[Rob]

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.