Can't get loading panel to show

[Thomas]

Hi,

I have some RadGrids on a page, and I'd like a loading panel to show up during AJAX calls. For example, let's focus on a virtual scrolling grid.

On this demo page, we can see virtual scrolling, and a loading panel showing up as you scroll. For some reason, no matter what I try, I can't get the loading panel to show. The AJAX magic does work, though.

Are there common pitfalls that I should be aware of, or something?

My code:
In a first control:

<telerik:RadScriptManager ID="scriptManager" runat="server" />

(...)

<telerik:RadAjaxManager ID="ajaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="resultGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="resultGrid" LoadingPanelID="resultAjaxPanel"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

In a sub control:

<telerik:RadAjaxLoadingPanel ID="resultAjaxPanel" runat="server" />

<telerik:RadGrid ID="resultGrid" runat="server" AutoGenerateColumns="False" ShowHeader="False"
    AllowPaging="True" PageSize="30" PagerStyle-Visible="false" CellSpacing="0" GridLines="None" OnItemCreated="resultGrid_ItemCreated" OnItemCommand="resultGrid_ItemCommand" OnItemDataBound="resultGrid_ItemDataBound">
<MasterTableView>
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>

    <Columns>
        <telerik:GridMaskedColumn UniqueName="idColumn" FilterControlAltText="Filter idColumn column" DataField="Id" Visible="false">
        </telerik:GridMaskedColumn>
        <telerik:GridBoundColumn DataField="Extension" FilterControlAltText="Filter extensionColumn column" UniqueName="extensionColumn">
            <ItemStyle Width="20px" CssClass="extensionColumn" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Title" FilterControlAltText="Filter linkColumn column" UniqueName="linkColumn">
            <ItemStyle CssClass="titleColumn" />
        </telerik:GridBoundColumn>
        <telerik:GridTemplateColumn>
            <ItemTemplate>
                <a href='<%# this.ResolveUrl("Preview.ashx?" + Insite.Web.Widgets.FilterSearch.Preview.IdParam + "=" + Eval("Id")) %>' target='_blank'><asp:Image ImageUrl="~/Widgets/FilterSearch/images/icon_loupe.png" runat="server" /></a>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Right" Width="16px" />
        </telerik:GridTemplateColumn>
        <telerik:GridButtonColumn ButtonType="LinkButton" CommandName="Add"
            FilterControlAltText="Filter addColumn column" UniqueName="addColumn" Text="ADD">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Right" Width="30px" CssClass="addColumn" />
        </telerik:GridButtonColumn>
    </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>

<ClientSettings>
    <Scrolling AllowScroll="True" EnableVirtualScrollPaging="true" SaveScrollPosition="True">
    </Scrolling>
</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

[Marin]

Hello Thomas,

 Please try moving the AjaxLoadingPanel to the main user control where you have the RadAjaxManager. You can also set the Skin property of the AjaxLoadingPanel to make sure it loads the spinning image correctly:

<telerik:RadScriptManager ID="scriptManager" runat="server" />



(...)



<telerik:RadAjaxManager ID="ajaxManager" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="resultGrid">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="resultGrid" LoadingPanelID="resultAjaxPanel"/>

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Vista" />

Kind regards,
Marin
the Telerik team

[Thomas]

Hi Marin,

Thanks, I ended up getting it working. This is what I needed:

- Add the Skin attribute to the RadAjaxLoadingPanel
- Move the RadAjaxManager and RadAjaxLoadingPanel to the sub control, where the RadGrid is

The second point is problematic, though, as beyond this simple example I described, I have actually a more complex structure with 2 sub controls, each containing a RadGrid. I cannot see how to fix this besides moving everything to the top control and have no more sub controls, which would make things less maintainable.

Edit: fixed it!
My problem was that my top control had a control named "resultGrid". This "resultGrid" control contained a RadGrid named the same way: "resultGrid", so when configuring the RadAjaxManager from the top control, the fact 2 controls had the same id caused my problem.
I just renamed the controls, so I now have "resultGridControl" and "resultGrid". This makes it so I can have the RadAjaxManager control on the top control, as there are no more confusions.