[Solved] RadAjaxLoadingPanel in UserControl - Displays only first time in one page, not at all on a different page

[Andrew]

I have a RadAjaxLoadingPanel and a RadGrid inside a User Control.
This UserControl appears on two pages.

On one of the pages, the first time I sort the RadGrid, the RadAjaxLoadingPanel displays exactly as it should. But then when I sort it a second time, it does not. Not until I perform a full postback action or refresh the page does the RadAjaxLoadingPanel work again, and again it only works once.

On the other one of the pages, the RadAjaxLoadingPanel just doesn't display at all.


I'm using this RadAjaxLoadingPanel one a different grid in a third page, and it works fine.

How do I go about solving this? I'm assuming that there is something else on the page which is intefering with the RadAjaxLoadingPanel.

I've enclosed the usercontrol markup and code-behind. (Note that I'm registering with the RadAjaxManager in the code, not the markup.)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TransferItemGrid.ascx.cs" Inherits="Viewers_TransferItemGrid" %>

<telerik:RadAjaxLoadingPanel
                    ID="loadPanelQueuedFiles"
                    runat="server"
                    Height="75px"
                    Width="75px"
                    Transparency="5">
                        <img
                            alt="Loading..."
                            src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                            style="border: 0;"
                            />
            </telerik:RadAjaxLoadingPanel>

<telerik:RadGrid
    ID="radGridFileTransfers"
    runat="server"
    Skin="Windows7"
    OnNeedDataSource="OnGridNeedDataSource"
    Width="95%"
    EnableViewState="true">
            <MasterTableView TableLayout="Auto" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true">
                <Columns>
                   <telerik:GridHyperLinkColumn
                            DataTextField="PlayerName"
                            HeaderText="Player"
                            DataNavigateUrlFields="PlayerId"
                            DataNavigateUrlFormatString="~/Admin/PlayerDiagnostics.aspx?playerid={0}"
                            SortExpression="PlayerName"
                            />
                   <telerik:GridBoundColumn
                            DataField="Name"
                            HeaderText="File"
                            SortExpression="Name"
                             />
                   <telerik:GridBoundColumn DataField="TransferType" HeaderText="Transfer Type" />
                   <telerik:GridBoundColumn DataField="Status" HeaderText="Status" />
                   <telerik:GridBoundColumn DataField="PercentageDownloaded" HeaderText="Downloaded %" />
                   <telerik:GridBoundColumn DataField="FileSize" HeaderText="Size" />
                </Columns>
            </MasterTableView>
         </telerik:RadGrid>

And the code-behind:

using System;
using System.Collections.Generic;
using WebsitePresentationLayer;
using Telerik.Web.UI;

public partial class Viewers_TransferItemGrid : System.Web.UI.UserControl
{
    public Viewers_TransferItemGrid()
    {
        this.IsPlayerColumnVisible = true;
    }

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

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        SetupAjax();
    }

    private void SetupAjax()
    {
        CmsPage cmsPage = (CmsPage)(this.Page);
        var ajaxSetting = new AjaxSetting(this.radGridFileTransfers.ID);
        ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl(this.radGridFileTransfers.ID, this.loadPanelQueuedFiles.ID));
        cmsPage.RadAjaxManager.AjaxSettings.Add(ajaxSetting);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    private IEnumerable<TransferTableRow> _transferTableRows;
    public IEnumerable<TransferTableRow> TransferTableRows
    {
        get
        {
            return _transferTableRows;
        }
        set
        {
            // There was a problem that the grid would become blank in the playerdiagnostics page
            // when the Refresh button was pressed
            _transferTableRows = value;
            this.radGridFileTransfers.DataSource = _transferTableRows;
            this.radGridFileTransfers.DataBind();
        }
    }

    public bool IsPlayerColumnVisible
    {
        get;
        set;
    }

    public const int PLAYER_COLUMN_INDEX = 0;


    protected override void OnPreRender(EventArgs e)
    {
        var playerColumn = this.radGridFileTransfers.Columns[PLAYER_COLUMN_INDEX];
        playerColumn.Visible = this.IsPlayerColumnVisible;
    }


    protected virtual void OnGridNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        this.radGridFileTransfers.DataSource = this.TransferTableRows;
    }
}

[Iana Tsolova]

Hello Andrew,

I used your code and added it to the attached runnable Web Site. The loading panel is displayed properly on my side. Check it out and let me know how it goes on your end and if I missed something out.

Additionally, please note that when you are binding the grid through the NeedDataSource event, you should never call the DataBind() method for the grid and set the DataSource property outside the NeedDataSource event handler.

Kind regards,
Iana
the Telerik team