RadListView contents disappearing on rebind

2 posts, 0 answers
  1. Jon
    Jon avatar
    1 posts
    Member since:
    Aug 2013

    Posted 19 Aug 2013 Link to this post

    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()");
        }

  2.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 22 Aug 2013 Link to this post

    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
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top