[Solved] RadAjaxLoadingPanel not showing on scrolling of virtualized RadGrid

[Chris]

I have a website that has a RadMultiPage control on the main page with 5 UserControls that wrap RadGrid's in each PageView.  The ASP.NET markup for this is below:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <ClientEvents OnRequestStart="onRequestStart" OnResponseEnd="hideHourGlass" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCodeBlock1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPageReporting" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadListBoxActiveLayer">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPageReporting" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPageReporting">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPageReporting"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Transparency="20" Skin="Default" />
    <telerik:RadMultiPage runat="server" ID="RadMultiPageReporting" SelectedIndex="4">
        <telerik:RadPageView runat="server" CssClass="radPageView" ID="RadPageView1">
            <div>
                <uc:CCTVGrid runat="server" ID="CCTVGridUserControl" />
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" CssClass="radPageView" ID="RadPageView2">
            <div>
                <uc:CommSegmentsGrid runat="server" ID="CommSegmentsGridUserControl" />
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" CssClass="radPageView" ID="RadPageView3">
            <div>
                <uc:DetectorsGrid runat="server" ID="DetectorsGridUserControl" />
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" CssClass="radPageView" ID="RadPageView4">
            <div>
                <uc:DMSGrid runat="server" ID="DMSGridUserControl" />
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" CssClass="radPageView" ID="RadPageView5">
            <div>
                <uc:TrafficSignalsGrid runat="server" ID="TrafficSignalsGridUserControl" />
            </div>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

The problem I am having is with the TrafficSignalsGrid (RadGrid with Virtualization enabled).  In spite of a number of solutions I have tried, it will not show a RadAjaxLoadingPanel when it has to load more data on scrolling.  Right now I've left it with the markup I added to try to use the "RadAjaxLoadingPanel1" control that is in the main page (above) but that's not working.  I tried creating a new Loading Panel and adding it to the TrafficSignalsGrid user control, but couldn't get that to work either.  Can you please assist me with the right way to do this?  The relevant markup for the TrafficSignalsGrid is included below:

<telerik:RadGrid ID="RadGridTrafficSignals" runat="server"
        CssClass="gridClass"
        GridLines="None"
        AutoGenerateColumns="False"
        AllowSorting="True"
        EnableHeaderContextMenu="True"
        Width="98%" Height="636px"
        OnNeedDataSource="RadGridTrafficSignals_NeedDataSource"
        OnUpdateCommand="RadGridTrafficSignals_OnUpdateCommand"
        OnItemUpdated="RadGridTrafficSignals_ItemUpdated"
        OnDataBound="RadGridTrafficSignals_DataBound"
        OnItemCommand="RadGridTrafficSignals_ItemCommand"
        OnItemCreated="RadGridTrafficSignals_OnItemCreated"
        CellSpacing="0"
        AllowFilteringByColumn="True"
        ShowGroupPanel="True"
        ShowStatusBar="False">
        <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True">
            <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand"></ClientEvents>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="458px"></Scrolling>
            <Virtualization EnableVirtualization="true" ItemsPerView="100" LoadingPanelID="RadAjaxLoadingPanel1" />
        </ClientSettings>
...
</telerik:RadGrid>

[Chris]

NOTE: Forgot to include this, I am using version 2013.3.1015.45 of the Telerik ASP.NET controls with ASP.NET 4.5.

[Kostadin]

Hi Chris,

You have to add the LoadingPanel in the UserControl where the grid is placed. For your convenience I prepared a small sample and attached it to this thread. Please give it a try and let me know how it differs from your real setup.

Regards,
Kostadin
Telerik