loading panel not showing up

7 posts, 1 answers
  1. Dave
    Dave avatar
    36 posts
    Member since:
    Jan 2008

    Posted 12 Jul 2011 Link to this post

    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?
  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Jul 2011 Link to this post

    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!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave
    Dave avatar
    36 posts
    Member since:
    Jan 2008

    Posted 13 Jul 2011 Link to this post

    thanks! that did the trick. please consider adding this to your documentation if it's not already in there.
  5. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 15 Jan 2012 Link to this post

    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>
  6. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 15 Jan 2012 Link to this post

    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>



  7. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 10 Jul 2012 Link to this post

    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.
  8. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 20 Dec 2013 Link to this post

    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" />
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017