RadAjaxLoadingPanel not showing on scrolling of virtualized RadGrid

3 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2012

    Posted 15 Feb 2014 Link to this post

    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>
  2. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2012

    Posted 15 Feb 2014 in reply to Chris Link to this post

    NOTE: Forgot to include this, I am using version 2013.3.1015.45 of the Telerik ASP.NET controls with ASP.NET 4.5.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 19 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top