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