Forums (Obsolete)

Member

Nesfuratu - 5/26/2011 1:05:46 AM

Code behind binding a CMSRepeater and hooking it up with a UniPager

Hello,

I have a CMSRepeater (rptVideos) a page, and have used Google's API to get a list of youtube videos and have set rptVideos.Datasource = this.VideoFeed.Entries.Skip(1).ToList();

Now, I want to set up a pager so that the repeater only shows 4 videos per page. I have put a UniPager on the page and have set its PageControl parameter to point to rptVideos. It's just not working.

Any help would be appreciated.

Thanks,
John.

Member

kentico_michal - 5/26/2011 1:53:18 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hello John,

Could you please try to set DelayedLoading property of the CMSRepeater to true, as CMS controls may in some cases require DelayedLoading property to be set to true for the UniPager to work.

If it does not help, could you please post here the definition of your CMSRepater and UniPager control.

Moreover, which version of Kentico CMS you are using?

Best regards,
Michal Legen

Member

Nesfuratu - 5/26/2011 2:33:39 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hi, it's still not working. I'm getting the object reference not set to an instance of an object error when I run

rptVideos.DataBind();

Here's how I'm declaring the repeater.


<cms:CMSRepeater ID="rptVideos" runat="server" OnItemDataBound="rptVideos_ItemDataBound" DelayedLoading="true">
	<HeaderTemplate><ul class="Videos"></HeaderTemplate>
	<ItemTemplate>
		<li class="<%# Container.ItemIndex % 4 == 3 ? "Last" : "" %>">
			// display a video
		</li>
	</ItemTemplate>
	<FooterTemplate>
		</ul>
	</FooterTemplate>
</cms:CMSRepeater>

Here's my unipager


<cms:UniPager ID="ucUniPager" runat="server" PageControl="rptVideos" PageSize="4" GroupSize="4" />

Here's the code behind for setting the datasource for rptVideos


        rptVideos.DataSource = this.VideoFeed.Entries.Skip(1).ToList();
        rptVideos.DataBind();

Member

kentico_michal - 5/26/2011 3:14:46 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hello John,

I think the UniPager control is missing definitions of templates. I would recommend reading the following articles and setting up the UniPager control accordingly:

- UniPager - getting started
- UniPager - Structure

Anyway, in which method do you call the DataBinding() method?

Best regards,
Michal Legen

Member

Nesfuratu - 5/26/2011 3:20:32 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hi Michal,

The doco says that the UniPager needs to work with a control that uses a Datasource webpart, which I'm not using at the moment. I was wondering if there was a way to set the datasource like you would normally do with a ASP:Repeater.

I'm calling rptVideos.DataBind(); within

protected void Page_Load(object sender, EventArgs e)

Member

Nesfuratu - 5/26/2011 3:30:17 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hi Michal,

I got it working now by setting the repeater's datasource to a PagedDataSource object.

I have another problem now. Because I have set the PagerMode to Postback, and have put the repeater and the pager within an UpdatePanel, now when I click on a number to go to a page, all the videos disappear and my pager no longer appears.

It's as if on click, it does not rebind the repeater and pager?

Member

kentico_michal - 5/30/2011 5:06:41 AM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Hello,

Could you please try to use following code in the OnPreRender method:


protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);

  if (RequestHelper.IsPostBack())
  {
     repeaterID.ReloadData(true);
     updatePanelID.Update();
  }
}

If it does not help, could you please let me know which version of Kentico CMS you are using?

Moreover, could you please post here the updated version of the code you are using?

Thank you.

Best regards,
Micha Legen

Member

Nesfuratu - 6/9/2011 8:08:12 PM

RE:Code behind binding a CMSRepeater and hooking it up with a UniPager

Got this working a while ago. Here's some code snippets for those interested.

HTML


<asp:UpdatePanel runat="server" ID="updRelatedVideos" UpdateMode="Always">
                        <ContentTemplate>
                            <h3>Related <strong>Videos</strong></h3>
                            <cms:CMSRepeater ID="rptVideos" runat="server" OnItemDataBound="rptVideos_ItemDataBound" DelayedLoading="true">
                                <HeaderTemplate><ul class="Videos"></HeaderTemplate>
                                <ItemTemplate>
                                    <li class="<%# Container.ItemIndex % 4 == 3 ? "Last" : "" %>">
                                        <asp:HyperLink ID="hlVideo" runat="server" CssClass="BorderOverlay" NavigateUrl="javascript:loadVideo('{0}')"/>
                                        <asp:Image ID="imgThumb" runat="server" CssClass="Thumbnail" />
                                        <asp:Label ID="lblDuration" runat="server" CssClass="Duration" />
                                        <asp:Label ID="lblTitle" runat="server" CssClass="Title" />
                                        <asp:HyperLink ID="hlMoreLink" runat="server" Text="Read more." CssClass="MoreLink" />
                                        <asp:Label ID="lblComments" runat="server" Text="({0}) Comment{1}" CssClass="CommentCount" />
                                    </li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ul>
                                </FooterTemplate>
                            </cms:CMSRepeater>

                            
                            <cms:UniPager ID="uniPager" runat="server" 
                                PageControl="rptVideos" 
                                PageSize="4" GroupSize="4" PagerMode="PostBack" 
                                DisplayFirstLastAutomatically="false" HidePagerForSinglePage="true" >
                                    <PageNumbersTemplate>
                                      <li><a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a></li>
                                    </PageNumbersTemplate>        
                                    <CurrentPageTemplate>
                                      <li><span><%# Eval("Page") %></span></li>
                                    </CurrentPageTemplate>
                                    <PreviousPageTemplate>
                                      <li class="Prev"><a href="<%# Eval("PreviousURL") %>"><</a></li>
                                    </PreviousPageTemplate>                
                                    <NextPageTemplate>
                                      <li class="Next"><a href="<%# Eval("NextURL") %>">></a></li>
                                    </NextPageTemplate>  
                                    <LayoutTemplate>
                                      <ul id="Pager" class="Pager" runat="server">
                                      <asp:PlaceHolder runat="server" ID="plcPreviousPage"></asp:PlaceHolder>
                                      <asp:PlaceHolder runat="server" ID="plcPageNumbers"></asp:PlaceHolder>
                                      <asp:PlaceHolder runat="server" ID="plcNextPage"></asp:PlaceHolder>
                                      </ul>
                                    </LayoutTemplate>
                            </cms:UniPager>
                        </ContentTemplate>
                    </asp:UpdatePanel>

Code behind


protected Feed<Video> VideoFeed { get; set; }

protected PagedDataSource pds;

protected void Page_Load(object sender, EventArgs e)
    {
        SetupFeed(); // setup the youtube feed here
        pds = new PagedDataSource();
        pds.DataSource = this.VideoFeed.Entries.Skip(1).ToList(); // skip the first element
        pds.AllowPaging = true;
        pds.PageSize = 4;

        SetupRepeater(); // set up the repeater
    }

protected void SetupRepeater()
    {
        lblVideoTitle.Text = this.VideoFeed.Entries.First().Title;
        lblVideoDesc.Text = this.VideoFeed.Entries.First().Description;

        rptVideos.DataSource = pds; // paged datasource
        rptVideos.DataBind();
    }