+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Replace Repeater with DataList in News View control

Replace Repeater with DataList in News View control

3 posts, 0 answered
  1. Wong
    Wong avatar
    8 posts
    Registered:
    24 Jun 2008
    29 Oct 2008
    Link to this post
    My some old web pages have more than one column in item list. I think it will be suitable to use DataList to display it. But I can't find a way to use it in the News View control. Please tell me I can replace Repeater with DataList in the News View control or not.
  2. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    29 Oct 2008
    Link to this post
    Hello Wong,

    unfortunately replacing Repeater with DataList would require overriding of the NewsView control with your own implementation. I have created a simple multi-column repeater control for you. Here is what you need to do to make it work:

    1. Add new file to the App_Code folder of your website and name it MultiColumnRepeater.cs
    2. Paste following code into this file:
    using System;  
    using System.Collections;  
    using System.Collections.Generic;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
     
    namespace SampleControls  
    {  
        /// <summary>  
        /// Summary description for MultiColumnRepeater  
        /// </summary>  
        public class MultiColumnRepeater : Repeater  
        {
            #region Properties  
     
            public int RepeatColumns  
            {  
                get 
                {  
                    return repeatColumns;  
                }  
                set 
                {  
                    repeatColumns = value;  
                }  
            }
            #endregion  
     
            #region Base overrides  
     
            protected override IEnumerable GetData()  
            {  
                totalNumberOfItems = GetCount(base.GetData());  
                columnRows = Convert.ToInt32(Math.Ceiling((decimal)((decimal)totalNumberOfItems / (decimal)repeatColumns)));  
                return base.GetData();  
            }  
     
            protected override RepeaterItem CreateItem(int itemIndex, ListItemType itemType)  
            {  
                RepeaterItem rItem = base.CreateItem(itemIndex, itemType);  
                if (itemType == ListItemType.Item || itemType == ListItemType.AlternatingItem)  
                {  
                    addedItemsToColumn++;  
                    if(addedItemsToColumn == columnRows)  
                    {  
                        Control cHeader = new Control();  
                        HeaderTemplate.InstantiateIn(cHeader);  
                        Control cFooter = new Control();  
                        FooterTemplate.InstantiateIn(cFooter);  
                        rItem.Controls.AddAt(0, cHeader);  
                        rItem.Controls.AddAt(rItem.Controls.Count -1, cFooter);  
                        addedItemsToColumn = 0;  
                    }  
                }  
     
                return rItem;  
            }
            #endregion  
     
            #region Private methods  
     
            private int GetCount(IEnumerable enumerable)   
            {     
                int count = 0;     
                foreach (object o in enumerable)     
                    count++;     
                return count;     
            }  
            #endregion  
     
            #region Private fields  
     
            int repeatColumns;  
            int columnRows;  
            int totalNumberOfItems;  
            int addedItemsToColumn = -1;
            #endregion  
     
        }  
     
    3. Open the master template for the NewsView control. Its default location is at:
    ~/Sitefinity/ControlTemplates/News/Modes/ListPageMaster.ascx
    4. Add this line at the top of the template:
    <%@ Register Namespace="SampleControls" Assembly="App_Code" TagPrefix="SampleControls" %> 
    5. Replace the repeater tags with these tags:
    <SampleControls:MultiColumnRepeater ID="repeater" runat="server" RepeatColumns="4">  
    ...  
    </SampleControls:MultiColumnRepeater> 
    NOTE: RepeatColumns property determines how many columns should there be (in this example it is 4)
    6. Apply the css styling to the container elements (sf_NewsList element in the header) so that they float.
    The final look of the ListPageMaster.ascx should look like this:
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 
    <%@ Register Namespace="SampleControls" Assembly="App_Code" TagPrefix="SampleControls" %> 
     
    <sf:CssFileLink ID="CssFileLink1" FileName="~/Sitefinity/ControlTemplates/News/newsCommonLayout.css" Media="screen" runat="server" /> 
     
    <asp:HyperLink ID="backLink" runat="server" Text="<%$Resources:GoBack %>"></asp:HyperLink> 
     
    <SampleControls:MultiColumnRepeater ID="repeater" runat="server" RepeatColumns="4">  
        <HeaderTemplate> 
            <ul class="sf_newsList" style="float:left;">  
        </HeaderTemplate> 
        <ItemTemplate> 
            <li> 
                <h2 class="sf_newsTitle">  
                    <asp:HyperLink ID="fullContent1" runat="server">  
                        <asp:Literal ID="Title" runat="server"></asp:Literal> 
                    </asp:HyperLink> 
                </h2> 
                <class="sf_newsDate">  
                    <asp:Literal ID="Publication_Date" runat="server" Text="{0}" /> 
                </p> 
                <p> 
                    <asp:Literal ID="Summary" runat="server" Text=""></asp:Literal> 
                </p> 
                <class="sf_readMore">  
                    <asp:HyperLink ID="fullContent2" runat="server">  
                        <asp:Literal ID="LiteralFS" runat="server" Text="<%$Resources:FullStory %>"></asp:Literal> 
                    </asp:HyperLink> 
                </p> 
                <asp:PlaceHolder ID="ThumbnailHolder" runat="server">  
                    <class="sf_newsThumbnail"><asp:Image ID="Thumbnail" runat="server" /></p>  
                </asp:PlaceHolder> 
                <class="sf_newsAuthor">  
                        <asp:Literal ID="Author" runat="server"></asp:Literal> 
                </p> 
                <p> 
                    <asp:Literal ID="Source" runat="server"></asp:Literal> 
                </p> 
                <class="sf_postCategory">  
                    <asp:HyperLink ID="Category" runat="server" /> 
                </p> 
                <class="sf_postTags">  
                    <asp:Repeater ID="Tags" runat="server">  
                        <ItemTemplate> 
                            <asp:HyperLink ID="tagLink" runat="server" /> 
                        </ItemTemplate> 
                    </asp:Repeater> 
                </p> 
            </li> 
        </ItemTemplate> 
        <FooterTemplate> 
            </ul> 
        </FooterTemplate> 
    </SampleControls:MultiColumnRepeater> 
    <div style="clear:both;"><!-- --></div>  
    <sf:Pager ID="pager1" runat="server">  
        <LayoutTemplate> 
            <asp:Repeater ID="PageRepeaterLinkButton" runat="server">  
                <HeaderTemplate> 
                    <ol class="sf_pager">  
                    <li><asp:LinkButton ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:LinkButton></li>  
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:LinkButton ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:LinkButton ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:LinkButton></li>  
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
            <asp:Repeater ID="PageRepeaterHyperLink" runat="server">  
                <HeaderTemplate> 
                    <ol class="sf_pager">  
                    <li><asp:HyperLink ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:HyperLink></li>  
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:HyperLink ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:HyperLink ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:HyperLink></li>  
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
        </LayoutTemplate> 
    </sf:Pager> 

    In case you are using the old template:
    ~/Sitefinity/ControlTemplates/News/ContentViewItemList.ascx
    do the steps 4 through 6 for that template as well.

    I hope you'll find this information helpful. Let us know if there is anything else we can do for you.

    Greetings,
    Ivan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Wong
    Wong avatar
    8 posts
    Registered:
    24 Jun 2008
    30 Oct 2008
    Link to this post

    Thanks

    Wong

Register for webinar
3 posts, 0 answered