Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListView > loading panel not showing up

Answered loading panel not showing up

Feed from this thread
  • Dave avatar

    Posted on Jul 12, 2011 (permalink)

    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?

    Reply

  • Answer Pavlina Pavlina admin's avatar

    Posted on Jul 13, 2011 (permalink)

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

    Reply

  • Dave avatar

    Posted on Jul 13, 2011 (permalink)

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

    Reply

  • Rasheed avatar

    Posted on Jan 15, 2012 (permalink)

    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>

    Reply

  • Rasheed avatar

    Posted on Jan 15, 2012 (permalink)

    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>



    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListView > loading panel not showing up
Related resources for "loading panel not showing up"

ASP.NET ListView Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]