How to Create a Categories Control That Lists Sub-categories in Sitefinity CMS

May 10, 2013 Digital Experience
In this blog post I'm going to show you how to create a Sub-categories control in Sitefinity CMS. Recently, many of you requested the ability to specify a root category in the Categories control, so that only child categories of the root category would appear on the front-end. Here's one simple way to do that. 

1. First we add a class file to our Sitefinity project and name it CustomTaxonomyControl. Our class inherits from TaxonomyControl. The TaxonomyControl has several modes in which it renders taxonomies - HorizontalList, VerticalList and Cloud. Each one of the options is represented by a Repeater on the front-end. We override InitializeControls method of TaxonomyControl and subscribe to the TaxaRepeater ItemDataBound event. TaxaRepeater is the repeater, which renders our taxonomies. Then we can call the base implementation of InitializeControls:
protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
      {
          this.TaxaRepeater.ItemDataBound -= base.TaxaRepeater_ItemDataBound;
          this.TaxaRepeater.ItemDataBound += TaxaRepeater_ItemDataBound123;
          base.InitializeControls(container);
 
      }
In our custom control we have three properties - ParentCategory, FieldName and ParentCategory. The first two come from TaxonomyControl and we hardcode their values, so that the field name will always be Category (Tags do not have hierarchical structure), and the taxonomyId will be set to the Categories taxonomy id. We do that in case we are going to use the control to display categories only. If you want to use it for other hierarchical taxonomies, you don't need to fill these properties. You will be able to fill them through the Advanced properties of the widget (in the UI) and set the fieldName to your hierarchical taxonomy's fieldName, as well as the TaxonomyId to its corresponding id. The ParentCategory property from type string is added by us, and we'll use it to specify the parent (root category). By doing this, your widget will only display categories (hierarchical taxonomies, which are children of this taxonomy).

In the ItemDataBound event of the Repeater control we call the base ItemDataBound  and then we check the URL of each taxonomy, bound to the Repeater. If the URL doesn't contain our parentCategory, followed by forward slash (this way we make sure that this will catch the parent taxonomy, as well), we set Visible = false for these items. 
protected internal virtual void TaxaRepeater_ItemDataBound123(object sender, RepeaterItemEventArgs e)
{
    base.TaxaRepeater_ItemDataBound(sender, e);
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var taxonData = e.Item.DataItem as TaxonData;
        var link = e.Item.FindControl("link") as HyperLink;
 
        if (link != null)
        {
            if (ParentCategory!=null && !taxonData.Url.Contains(ParentCategory.Trim().ToLower() + "/"))
            {
                e.Item.Visible = false;
            }
 
        }
    }

You can register the control as a custom control in Sitefinity CMS and use it.

The code of the widget is attached to the post.

Enjoy!

The Progress Team