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.
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
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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.