Digital Experience
Tabbed blog controls

Tabbed blog controls

by The Progress Team
Posted on January 21, 2010 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

The bellow blog post will guide you how to create a control to display blog authors, blog archive and blog tags in a fashion similar to the one on the Sitefinity Blogs.

 

What we have to do is to create a custom control and a template for this control. This custom control will wrap in the functionality of the existing BloggersList, BlogArchive and TagsList controls. We will use a RadTabStrip control and a RadMultiPage to put each of the first three controls in a different tab. Lets start by creating the template for our control:

<%@ Control Language="C#" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="Telerik.Blogs" Namespace="Telerik.Blogs.WebControls" TagPrefix="sfWeb" %> 
<%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls.Tags" TagPrefix="sfWeb" %> 
<telerik:RadTabStrip ID="TabStrip1" runat="server" Skin="Vista" SelectedIndex="0" MultiPageID="MultiPage1"> 
    <Tabs> 
        <telerik:RadTab Text="Bloggers"> 
        </telerik:RadTab> 
        <telerik:RadTab Text="Archive"> 
        </telerik:RadTab> 
        <telerik:RadTab Text="Tags"> 
        </telerik:RadTab> 
    </Tabs> 
</telerik:RadTabStrip> 
<telerik:RadMultiPage ID="MultiPage1" runat="server" SelectedIndex="0"> 
    <telerik:RadPageView ID="BloggersView" runat="server"> 
        <sfWeb:BloggersList ID="BloggersList1" 
            runat="server" ProviderName="Blogs">     
            <LayoutTemplate> 
                <h2> 
                    <asp:Literal ID="controlTitle" runat="server"></asp:Literal> 
                </h2> 
                <!-- bulleted list mode --> 
                <asp:BulletedList ID="bulletedList" runat="server"> 
                </asp:BulletedList> 
                <!-- dropdown list mode --> 
                <p><telerik:OptgroupDropDownList ID="dropDownList" runat="server"> 
                </telerik:OptgroupDropDownList></p> 
            </LayoutTemplate>         
        </sfWeb:BloggersList> 
    </telerik:RadPageView> 
    <telerik:RadPageView ID="ArchiveView" runat="server"> 
        <sfWeb:BlogArchive ID="BlogArchive1" runat="server"> 
            <LayoutTemplate> 
                <!-- bulleted list mode --> 
                <telerik:RadTreeView ID="archiveTreeView" ShowLineImages="false" runat="server"></telerik:RadTreeView> 
                <!-- dropdown list mode --> 
                <p><telerik:OptgroupDropDownList ID="dropDownList" runat="server"> 
                </telerik:OptgroupDropDownList></p> 
            </LayoutTemplate> 
        </sfWeb:BlogArchive> 
    </telerik:RadPageView> 
    <telerik:RadPageView ID="TagsView" runat="server"> 
        <sfWeb:TagsList ID="BlogTagsList1" runat="server" ProviderName="Blogs"> 
            <LayoutTemplate> 
                <p> 
                    <asp:Literal ID="lblDisplayAs" runat="server" Text="Display as"></asp:Literal> : 
                    <asp:LinkButton ID="displayCloudLink" runat="server" Text="cloud"></asp:LinkButton> | 
                    <asp:LinkButton ID="displayListLink" runat="server" Text="list"></asp:LinkButton> 
                </p> 
 
                <asp:Repeater ID="tagsRepeaterCloud" runat="server"> 
                    <HeaderTemplate><ul class="tagCloud"></HeaderTemplate> 
                    <ItemTemplate> 
                        <li><asp:HyperLink ID="tagLink" runat="server" CssClass="tagCloudItem"></asp:HyperLink></li> 
                    </ItemTemplate> 
                    <FooterTemplate></ul></FooterTemplate> 
                </asp:Repeater> 
 
                <asp:Repeater ID="tagsRepeaterList" runat="server"> 
                    <HeaderTemplate><ul></HeaderTemplate> 
                    <ItemTemplate> 
                        <li> 
                            <asp:HyperLink ID="tagLink" runat="server"></asp:HyperLink> 
                            (<asp:Label ID="taggedContentCount" runat="server"></asp:Label>) 
                        </li> 
                    </ItemTemplate> 
                    <FooterTemplate></ul></FooterTemplate> 
                </asp:Repeater> 
            </LayoutTemplate> 
        </sfWeb:TagsList> 
    </telerik:RadPageView> 
</telerik:RadMultiPage> 

 

On the back-end of the control we do not have to do a lot of coding. We only need to expose a few properties so that we can edit our control setting through the UI of the CMS. We will set the LayoutTemplatePath property to point to the template we have just created, and will expose the BloggersList, BlogArchive, and TagsList control as editable properties:
    public class BlogMultiView : SimpleControl 
    { 
        #region Public Properties 
        [WebEditor("Telerik.FileManager.UrlWebEditor, Telerik.FileManager"), Category("Appearance")] 
        public override string LayoutTemplatePath 
        { 
            get 
            { 
                return "~/CustomControls/ControlTemplates/BlogMultiView.ascx"; 
            } 
            set 
            { 
                base.LayoutTemplatePath = value; 
            } 
        } 
        public BloggersList BloggersList 
        { 
            get 
            { 
                return base.Container.GetControl<BloggersList>("BloggersList1", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
                 
            } 
            set 
            { 
                this.BloggersList = value; 
            } 
        } 
 
        public BlogArchive BlogArchive 
        { 
            get 
            { 
                return base.Container.GetControl<BlogArchive>("BlogArchive1", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
            } 
            set 
            { 
                this.BlogArchive = value; 
            } 
        } 
        public TagsList BlogTagsList 
        { 
            get 
            { 
                return base.Container.GetControl<TagsList>("BlogTagsList1", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
            } 
            set 
            { 
                this.BlogTagsList = value; 
            } 
        } 

 

In order to save your users some time navigating from one control property editor to the other, you can directly expose some of the properties of the controls wrapped in:

        [Category("Blog Tags List")] 
        public string ProviderName 
        { 
            get 
            { 
                return this.BlogTagsList.ProviderName; 
            } 
            set  
            { 
                this.BlogTagsList.ProviderName = value; 
            } 
        } 

 

This will let users directly set the ProviderName property of the TagsList control. See bellow image for reference:

 

In order to add this control to your toolbox just use insert the bellow snippet in your web.config, and all what's left to do will be to stylize it mach your desired look and feel:

   <toolboxControls> 
    <clear /> 
    <add name="Blog Multi View" type="Telerik.Samples.Blogs.WebControls.BlogMultiView, App_Code" section="Custom Controls"/> 
   </toolboxControls> 

 

You can download the complete source code and markup from this link: BlogMultiView


Blog Controls RadMultiPage Tip of the Week
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation