[Solved] Display individual RadAjaxLoadingPanel while multiple controls are loading

[Christian]

Good Afternoon,

I am attempting to use RadAjax to build several SharePoint WebParts that each reach out to remote datasources, databind then display thier data. I am encountering an issue displaying individual loading panels while these controls perform thier initial load (This can be lengthy, a few seconds apiece).

The behviour I am looking for is to have individual RadAjaxUpdatePanels displayed while each control is loading. I have followed the example outlined here (http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html) and this works quite well, provided that not more than a single instance of the webpart appears on a given page or any other webpart that impliments this solution.

Attached to this solution is a simplified version of the WebPart logic that substitudes the databinding with a
System.Threading.Thread.Sleep call to simulate the call to an external resource.

When more than one instance of the same part that impliments this login is present on a page, only the call back seems to occure, by this I mean that at the same instance (after the prescribbed delay) the callback renders both webparts simultainiously.

When instances of different WebParts implimenting this logic are on a given page, only the second callback appears to occure and only the last webpart is rendered after the prescribed delay.

I hope that this is enough to make the issue clear enough to address. Below is the source of the WebPart in it's entirety;

MyWeek WebPart Code

MyWeekPart.cs

using System;
using System.Text;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.Practices.SPG.Common.Logging;
using Microsoft.Practices.SPG.Common.ServiceLocation;
using Telerik.Web.UI;
using NipissingU.Portal.Common.ExceptionHandling;
using NipissingU.Portal.Common.Entities;
using NipissingU.Portal.Colleague.Repositories;
using NipissingU.Portal.Common.Utility;

namespace NipissingU.Portal.WebPart.MyWeek
{
    public class MyWeekPart : Microsoft.SharePoint.WebPartPages.WebPart
    {
        #region Fields...
        private Control myWeekControl;
        private Panel Panel1;
        private Panel Panel2;
        private RadAjaxLoadingPanel RadAjaxLoadingPanel1;

        #endregion

        #region Properties...
        IErrorVisualizer ErrorVisualizer { get; set; }
        #endregion


        #region Overridden Methods...
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
            if (scriptManager == null)
            {
                scriptManager = new RadScriptManager();
                this.Page.Form.Controls.AddAt(0, scriptManager);
            }

            Page.ClientScript.RegisterStartupScript(typeof(MyWeekPart), this.ID, "_spOriginalFormAction = document.forms[0].action;_spSuppressFormOnSubmitWrapper=true;", true);
            if (this.Page.Form != null)
            {
                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                if (!string.IsNullOrEmpty(formOnSubmitAtt) && formOnSubmitAtt == "return _spFormOnSubmitWrapper();")
                {
                    this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";
                }
            }
        }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            ErrorVisualizer errorVisualizer = new ErrorVisualizer();
            this.ErrorVisualizer = errorVisualizer;

            try
            {
                this.Controls.Add(errorVisualizer);

                // Load the UserControl Template from the /TEMPLATE/CONTROLTEMPLATES directory.
                myWeekControl = Page.LoadControl("/_controltemplates/NipissingU/MyWeekControl.ascx");

                // Add the Loaded control to the WebParts Control collection. This is important to
                // establish the Child Control Events!
                errorVisualizer.Controls.Add(myWeekControl);

                Panel1 = myWeekControl.FindControl("Panel1") as Panel;
                Panel2 = Panel1.FindControl("Panel2") as Panel;
                RadAjaxLoadingPanel1 = myWeekControl.FindControl("RadAjaxLoadingPanel1") as RadAjaxLoadingPanel;

                RadAjaxManager AjaxManager1 = RadAjaxManager.GetCurrent(this.Page);
                if (AjaxManager1 == null)
                {
                    AjaxManager1 = new RadAjaxManager();
                    AjaxManager1.ID = "RadAjaxManager1";
                    Controls.Add(AjaxManager1);
                    this.Page.Items.Add(typeof(RadAjaxManager), AjaxManager1);
                }

                AjaxManager1.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(MyWeekPart_AjaxRequest);
            }
            catch (Exception ex)
            {
                new ViewExceptionHandler().HandleViewException(ex, this.ErrorVisualizer,
                   Constants.FriendlyError);
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            if (!this.CheckForWebPartDisplayMode(WebPartManager.BrowseDisplayMode))
            {
                new ViewExceptionHandler().ShowFunctionalErrorMessage(Constants.DisplayModeError, this.ErrorVisualizer);
            }
        }
        #endregion

        #region Events...
        protected void MyWeekPart_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            try
            {
                if (e.Argument == "MyWeekLoad")
                {
                    System.Threading.Thread.Sleep(2000);
                    Panel2.Visible = true;

                    Label Label2 = new Label();
                    Label2.Text = e.Argument;
                    Panel2.Controls.Add(Label2);
                }
            }
            catch (Exception ex)
            {

            }
        }
        #endregion

        #region Private Methods...
        protected bool CheckForWebPartDisplayMode(WebPartDisplayMode mode)
        {
            bool flag = false;
            if ((base.WebPartManager != null) && (base.WebPartManager.DisplayMode == mode))
            {
                flag = true;
            }
            return flag;
        }
        #endregion
    }
}

Constants.cs

using System;

namespace NipissingU.Portal.WebPart.MyWeek
{
    public static class Constants
    {
        public static string FriendlyError = "My Week is currently unavailable.  Please try again later.";
        public static string DisplayModeError = "The page is in edit mode.  To show the contents of this web part, close the toolbar or refresh the web part.";
    }
}

MyWeekControl.aspx

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NipissingU.Portal.WebPart.MyWeek.MyWeekControl, NipissingU.Portal.WebPart.MyWeek, Version=1.0.0.0, Culture=neutral, PublicKeyToken=fc876b2c4bf21e29" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

<telerik:RadScriptBlock ID="RadScriptBlock1"  runat="server">
    <script type="text/javascript">
        function addLoadEvent(func)
        {
            var oldonload = window.onload;
            if (typeof window.onload != 'function')
            {
                window.onload = func;
            }
            else
            {
                window.onload = function() {
                    if (oldonload)
                    {
                        oldonload();
                    }
                    func();
                }
            }
        }

        function MyWeek_OnLoad()
        {
            setTimeout( function(){ window["<%= RadAjaxManager.GetCurrent(this.Page).ClientID %>"].ajaxRequest("MyWeekLoad"); }, 50);
        }

        addLoadEvent(MyWeek_OnLoad);
    </script>
</telerik:RadScriptBlock>

<style type="text/css">
    .module1
    {
        background-color: #dff3ff;
        border: 1px solid #c6e1f2;
    }
</style>

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
    <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<fieldset class="module1">
    <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Height="150px">
        <asp:Panel ID="Panel2" runat="server" Visible="False">
            <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click"
            Style="margin-top: 15px; margin-left: 15px" />
            <br />
            <asp:Label ID="Label1" runat="server" Text="Before Ajax..."></asp:Label>
        </asp:Panel>
    </asp:Panel>
</fieldset>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    <div align="center" class="nu-loadingpanel-container">
        <div class="dt-bigthrobber">&nbsp;</div>
        <div>Loading...</div>
    </div>
</telerik:RadAjaxLoadingPanel>

MyWeekControl.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

namespace NipissingU.Portal.WebPart.MyWeek
{
    public partial class MyWeekControl : System.Web.UI.UserControl
    {
        #region Fields...
        protected Label Label1;
        protected Panel Panel1;
        protected Button Button1;
        protected RadAjaxLoadingPanel RadAjaxLoadingPanel1;
        #endregion

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
            Label1.Text = DateTime.Now.ToLongTimeString();
        }
    }
}

Christian

[Pavlina]

Hello Christian,

I prepared a sample project for you illustrating different implementations of the desired functionality. Please try it on your end and let me know if it works for you.

I hope this helps.

All the best,
Pavlina
the Telerik team

[Christian]

Afternoon Pavlina,

Thanks very much for the sample code, I've taken the examples and attemted to incorporate them into my webparts with some limited success.

Here is the outstanding issue. If I take the code you provided and create a UserControl, then load that UserControl in my WebPart and place two identacle webparts on the same page, only the second WebPart on the page seems to operate as expected. The first WebPart does not call the "RadAjaxPanel1_AjaxRequest" handler.

The only code change that I'd made was to alter the RadScriptBlock from;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxRequests.aspx.cs" Inherits="AjaxRequests" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
        <script type="text/javascript">
            function pageLoad (sender, eventArgs) {
                if (eventArgs.get_isPartialLoad() == false) {
                    $find("RadAjaxPanel1").ajaxRequest("InitialLoad");
                }
            }
        </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="200px"
            OnAjaxRequest="RadAjaxPanel1_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" style="border: 3px solid red">
            <asp:Panel ID="Panel1" runat="server" Visible="false">
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </asp:Panel>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Height="200px" Width="200px"
            OnAjaxRequest="RadAjaxPanel2_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" style="border: 3px solid blue">
            <asp:Panel ID="Panel2" runat="server" Visible="false">
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" />
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </asp:Panel>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />
    </form>
</body>
</html>

To;

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="~/WebPart/MyNotificationsControl.cs"
    Inherits="NipissingU.Portal.WebPart.MyNotifications.MyNotificationsControl, NipissingU.Portal.WebPart.MyNotifications, Version=1.0.0.0, Culture=neutral, PublicKeyToken=27cf2ef217eedcab" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<%@ Import Namespace="Telerik.Web.UI" %>

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
    <script type="text/javascript">
        function pageLoad (sender, eventArgs) {
            if (eventArgs.get_isPartialLoad() == false) {
                $find('<%= this.FindControl("RadAjaxPanel1").ClientID %>').ajaxRequest("InitialLoad");
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="200px"
    OnAjaxRequest="RadAjaxPanel1_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" style="border: 3px solid red">
    <asp:Panel ID="Panel1" runat="server" Visible="false">
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </asp:Panel>
</telerik:RadAjaxPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Height="200px" Width="200px"
    OnAjaxRequest="RadAjaxPanel2_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" style="border: 3px solid blue">
    <asp:Panel ID="Panel2" runat="server" Visible="false">
        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" />
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </asp:Panel>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />

Otherwise the CodeBehind in the UserControl is the same as "AjaxRequest.aspx.cs".

I am sure that I am missing something fundamental here, but I am afraid that I cannot see it.

Regards,

Christian

[Pavlina]

Hi Christian,

To overcome this behavior you can set the RadAjaxPanel/RadAjaxManager RequestQueueSize property as described here, so it handles the multiple requests.

All the best,
Pavlina
the Telerik team

[Christian]

I still seem to be missing something. When I place more than one WebPart on a page, both webparts display the loading panel. Each Ajax request is made. The first request appears to return properly and the web part is displayed as expected, however any subsiquent web parts appear to go into an infinite loop where the Server side event handler is called repeatedly. 

Each webpart has the same "bootstrapping" which is an RadAjaxPanel with an child panel, see below.

<telerik:RadAjaxPanel ID="RadAjaxPanelMyWeek" runat="server">
    <asp:Panel ID="PanelContent" runat="server" Visible="False" CssClass="nu-myweek">
!!! Additional WebPart Content Here !!!
    </asp:Panel>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    <div align="center" class="nu-loadingpanel-container">
        <div class="dt-bigthrobber"> </div>
        <div>Loading...</div>
    </div>
</telerik:RadAjaxLoadingPanel>

I wire up the RadAjaxPanel AjaxRequest handler in code within the OnLoad method of the WebPart, see below.

RadAjaxPanelMyWeek.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(MyWeekPart_AjaxRequest);

The actual code for the Ajax request is pretty straight forward, see below.

protected void MyWeekPart_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    try
    {
        if (e.Argument == "InitialLoad")
        {
            this.DataBind();
            PanelContent.Visible = true;
        }
    }
    catch (Exception ex)
    {
        new ViewExceptionHandler().HandleViewException(ex, this.ErrorVisualizer,
           Constants.FriendlyError);
    }
}

The actual Client Side Ajax request is made like so by each WebPart.
 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        Sys.Application.add_load(MyWeek_OnLoad);

        function MyWeek_OnLoad(sender, args)
        {
            if(!args.get_isPartialLoad())
            {
                var clientId = '<%= this.FindControl("RadAjaxPanelMyWeek").ClientID %>';
                window[clientId].ajaxRequest("InitialLoad");
            }
        }
    </script>
</telerik:RadCodeBlock>

This code works perfectly fine if there is only one WebPart that utilizes this "bootstrapping" on the page. It does not matter if it is the same webpart or two different webparts. The second webpart begins what appears to be a recursive call to the EventHandler.

Of course, the MasterPage has both the RadAjaxManager control and the RadScriptManager.

I am completely vexed by this behaviour, and completely unable to get past it. I need to be able to have multiple WebParts make Asyncronous requests at load so that the long running databinding processes that populate these parts is mitigated by the presentation of the RadLoadingPanel. Not multiple controls within the same web part and not called seqentially.

Is this simply not possible?

Any direction is of course greatly appreciated.

[Pavlina]

Hello Christian,

Can you send me a working sample of your scenario. In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Thank you for your cooperation in advance.

Kind regards,
Pavlina
the Telerik team

[Christian]

Pavlina,

I have submitted a Support Ticket with the requested code attached. The ticket ID is 342514.

As always I appreciate your efforts to assist me with this issue.

Regards,

Christian

[Pavlina]

Hi Christian,

Please find our answer in the other thread you have posted on the same subject and to avoid duplicate posts I suggest that we continue your case discussion there as well.

Regards,
Pavlina
the Telerik team