loading panel not showing up

[Dave]

For some reason, the ajax loading panel is not showing when a partial postback involving my RadListView instance is going on.  Here is the top part of my code:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="scriptManagerExc" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <telerik:RadAjaxLoadingPanel ID="alpExc" runat="server" EnableSkinTransparency="true" Skin="Office2007" BackgroundPosition="TopLeft">
    </telerik:RadAjaxLoadingPanel>

Here is my radlistview instance:

<telerik:RadListView ID="lvExc" runat="server" ItemPlaceholderID="PlaceHolder1"
                AllowMultiFieldSorting="true" AllowPaging="true" Skin="Office2007"
                OnNeedDataSource="lvExc_NeedDataSource" onprerender="lvExc_PreRender">
                <LayoutTemplate>
                    <div class="RadListView RadListView_Office2007">
                        <table cellspacing="0">
                            <thead>
                                <tr class="rlvHeader">
                                    <th style="text-align: center;width:190px;">
                                        Portfolio
                                    </th>
                                    <th style="text-align: center;width:100px;">
                                        Average Actuals (SM/M)
                                    </th>
                                    <th style="text-align: center;width:100px;">
                                        Average Pgm Plan (SM/M)
                                    </th>
                                    <th style="text-align: center;width:100px;">
                                        Average Grp Plan (SM/M)
                                    </th>
                                    <th style="text-align: center;width:100px;">
                                        Pgm Plan minus Grp Plan (SM/M)
                                    </th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td colspan="5">
                                        <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="15" PagedControlID="lvExc" Skin="Office2007">
                                            <Fields>
                                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                                <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                                <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                                <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                                                <telerik:RadDataPagerTemplatePageField>
                                                    <PagerTemplate>
                                                        <div style="float: right">
                                                            <strong>Items
                                                                <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                                to
                                                                <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
                                                                of
                                                                <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                                                <br />
                                                            </strong>
                                                        </div>
                                                    </PagerTemplate>
                                                </telerik:RadDataPagerTemplatePageField>
                                            </Fields>
                                        </telerik:RadDataPager>
                                    </td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr style="background-color: #9AB5DB;">
                                    <td style="padding: 5px 7px 4px; text-align: right;">
                                        Grand Total:
                                    </td>
                                    <td style="text-align: center; padding: 5px 7px 4px;">
                                        <asp:Label ID="lblTotAvgAct" runat="server" />
                                    </td>
                                    <td style="text-align: center; padding: 5px 7px 4px;">
                                        <asp:Label ID="lblTotAvgPgm" runat="server" />
                                    </td>
                                    <td style="text-align: center; padding: 5px 7px 4px;">
                                        <asp:Label ID="lblTotAvgGrp" runat="server" />
                                    </td>
                                    <td style="text-align: center; padding: 5px 7px 4px;">
                                        <asp:Label ID="lblTotAvgPgmGrp" runat="server" />
                                    </td>
                                </tr>
                                <tr id="PlaceHolder1" runat="server">
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr class="rlvI">
                        <td style="width:190px;text-align: left;">
                            <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# CreateHyperlink(Eval("PORTFOLIO").ToString()) %>' runat="server" Text='<%# Eval("PORTFOLIO").ToString() %>'></asp:HyperLink>
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="AvgActualsLabel" runat="server" Text='<%# Eval("AvgActuals") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="ProgramPlanLabel" runat="server" Text='<%# Eval("ProgramPlan") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="GroupPlanLabel" runat="server" Text='<%# Eval("GroupPlan") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="lblPgmGrpVariance" runat="server" Text='<%# Eval("PgmVsGrp") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <tr class="rlvA">
                        <td style="width:190px;text-align: left;">
                            <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# CreateHyperlink(Eval("PORTFOLIO").ToString()) %>' runat="server" Text='<%# Eval("PORTFOLIO").ToString() %>'></asp:HyperLink>
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="AvgActualsLabel" runat="server" Text='<%# Eval("AvgActuals") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="ProgramPlanLabel" runat="server" Text='<%# Eval("ProgramPlan") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="GroupPlanLabel" runat="server" Text='<%# Eval("GroupPlan") %>' />
                        </td>
                        <td style="width:100px;text-align: center;">
                            <asp:Label ID="lblPgmGrpVariance" runat="server" Text='<%# Eval("PgmVsGrp") %>' />
                        </td>
                    </tr>
                </AlternatingItemTemplate>
                <EmptyDataTemplate>
                    <div id="noRecordsMsg">
                        <asp:Literal ID="litMsg" runat="server"></asp:Literal>
                    </div>
                </EmptyDataTemplate>
            </telerik:RadListView>

And here is my RadAjaxManager instance:

<telerik:RadAjaxManager ID="ramExc" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnFilterData">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lvExc" LoadingPanelID="alpExc" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnForceRefresh">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lvExc" LoadingPanelID="alpExc" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="lvExc">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lvExc" LoadingPanelID="alpExc" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Here are the 2 buttons referenced above:

<div id="submitButton">
    <asp:Button ID="btnFilterData" runat="server" Text="Filter Data" Font-Names="Tahoma, Arial, Helvetica, Sans-Serif" Font-Size="11px"
        onclick="btnFilterData_Click" CausesValidation="true" />
</div>

<div id="refreshButton">
    <asp:Button ID="btnForceRefresh" runat="server"
        Text="Refresh Data"
        Font-Names="Tahoma, Arial, Helvetica, Sans-Serif" Font-Size="11px"
        CausesValidation="false" onclick="btnForceRefresh_Click" />
</div>

In my code behind, I use the entity framework to pull the data from a stored procedure (thru data context) and then I take the results of the query, build a list of objects and bind them to the listview.

When the btnFilterData or btnForceRefresh buttons are clicked or when I page the listview, I expect that the loading image would show over top of the listview, but that's not happening. Any ideas why?

[Pavlina]

Hi Dave,

In order to show the RadAjaxLoadingPanel over the RadListView control you should wrap the control inside an asp:Panel, which should be set as updated control instead of RadListView.

Please give it a try and let me know how it goes.

Kind regards,
Pavlina
the Telerik team

[Dave]

thanks! that did the trick. please consider adding this to your documentation if it's not already in there.

[Rasheed]

hi there
i have the same problem and the solution wasn't good for me can any one help me please !! 

<asp:panel id="Panel" runat="server">
// here i have my RadListView
<LayoutTemplate>
                    <div id="Content" runat="server">
                    </div>
                    <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                        PageSize="1" Skin="WebBlue" Width="100%">
                        <Fields>
                            <telerik:RadDataPagerSliderField SliderDecreaseText="Decrease" SliderDragText="Drag"
                                SliderIncreaseText="Increase" SliderOrientation="Horizontal" />
                        </Fields>
                    </telerik:RadDataPager>
</LayoutTemplate>
</asp:panel>
<telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadListView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel" LoadingPanelID="RadAjaxLoadingPanel1"
                        UpdatePanelHeight="100%" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

[Rasheed]

the problem was with the AjaxControlID, this ID must be the RadDataPager ID, sorry and thanks !! 

<telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadDataPager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel" 
                        LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

[AJ]

Unless I missed it, this should really be noted somewhere in the documentation or in the demo. I spent a good part of the day pulling whatever hair I left out trying to figure why it wasn't showing up.

[Martin]

Faced the same issue, this has to be documented with like 10 stars or something, in order for this to work you have to wrap the RadListViw with a Panel and reference it as so

<telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />