RadListView contents disappearing on rebind

[Jon]

Hello,

I have a "View More" button which, upon clicking, increases the page size of my ListView control to show more entries. Functionally this works fine, however the panel my list view is in disappears and then reappears with the new content. I'd prefer to have it stay on the page while it loads more content, like it does in the integrated paging demo here: http://demos.telerik.com/aspnet-ajax/listview/examples/paging/integratedpaging/defaultcs.aspx

<telerik:RadAjaxManagerProxy runat="server" ID="Proxy1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlCategories">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCategories" UpdatePanelRenderMode="Inline" LoadingPanelID="AjaxPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="pnlLittleVideos" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="pnlLittleVideos">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlLittleVideos" LoadingPanelID="AjaxPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel runat="server" ID="AjaxPanel1">
        <img src="/bh/corporate/includes/img/loaders/style2_white.gif" />
    </telerik:RadAjaxLoadingPanel>

<asp:Panel runat="server" ID="pnlLittleVideos">
    <telerik:RadListView ID="rptLittleVideos" runat="server" AllowPaging="true" PageSize="2" ItemPlaceholderID="plcVideoContainer">
        <LayoutTemplate>
            <asp:PlaceHolder runat="server" ID="plcVideoContainer"></asp:PlaceHolder>
            <asp:Button runat="server" ID="btnNext" Text="More" OnClick="btnMore_Click" ></asp:Button>
        </LayoutTemplate>
        <ItemTemplate>
            <section class="box li-video">
                <!-- CONTENT HERE -->
            </section>
        </ItemTemplate>
    </telerik:RadListView>
</asp:Panel>

public void btnMore_Click(object sender, EventArgs e)
{
    rptLittleVideos.PageSize = 5;
    rptLittleVideos.CurrentPageIndex = 0;
    rptLittleVideos.Rebind();
}

private void rptLittleVideos_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
    {
        if (!IsPostBack) PopulateTags();

        var featurettes = CurrentItem
                        .ChildrenByTemplate("Little Inspiration Featurette")
                        .As(i => new LittleVideo(i))
                        .Where(i => i.IsSet) // && i.Tags.Contains(tag)
                        .ToList();

        // Check to see if we need to filter by category
        if (ddlCategories.SelectedIndex > 0)
        {
            var tagFiltered = new List<LittleVideo>();
            tagFiltered = featurettes.Where(i => i.Tags.Contains(ddlCategories.SelectedValue)).ToList();

            featurettes.Clear();
            featurettes.AddRange(tagFiltered);
        }

        rptLittleVideos.ItemDataBound += rptLittleVideos_ItemDataBound;
        rptLittleVideos.DataSource = featurettes;

        RadAjaxManager.GetCurrent(Page).ResponseScripts.Add("jQuery.app.pages.global.reloadJS()");
    }

[Konstantin Dikov]

Hello Jon,

Setting "Transparency" property to some percentage should lead to the results you are requiring. Please try the following code and see if that's what you want:

<telerik:RadAjaxLoadingPanel runat="server" ID="AjaxPanel1" MinDisplayTime="1000" Transparency="30">
    <img src="image.jpg" alt="  "/>
</telerik:RadAjaxLoadingPanel>

Additionally, you could have a look at our online demo "Ajax - Templates and Transparency".

Hope that helps.

 
Best Regards,
Konstantin Dikov
Telerik