Displaying the Categories Assigned to a Sitefinity Content Item as Clickable Links

Many of you have used our Taxonomy Fields for displaying the taxa an item's marked with on the frontend. We've received some feedback form clients that in certain cases you'd prefer to have this list of taxa behave as clickable taxonomy links, which when clicked can dynamically filter the ListView control.

As you know, by default the Hierarchical/FlatTaxonField when in Read mode will output the list of taxa names, as a clear text. For today's blog post we'll see how we can customize the way the taxa are displayed, and achieve filtering functionality.

We are going to adopt the good old approach of using an external widget template. This approach has many benefits. First, it allows us to easily add a code-behind to any template, and implement the additional business logic. Second, since all ContentView-based widgets use a databound control, like RadListView for displaying the list of items on the frontend, we could easily subscribe to the ItemDataBound event of the list view, and get access to each item that gets bound, and to its properties.

For the current blog post, let's take the News widget for example. We can copy its default template for TitlesDatesSummariesListView and paste the HTML in a new UserControl.

Then, while still on the presentational part, we can define a placeholder to display our category links. For example a label:


Then we can move to our new UserControl's code-behind part, to implement our business logic.

First, we need to subscribe to the ItemDataBound event of our RadListView control:
Next we have to get the actual Sitefinity content item that is being passed as parameter to the ItemDataBound event:

We also need to get a reference to our control that is going to display the desired categories links, and set its value:
Inside the RenderHierarchicalTaxaAsLink we are passing the Sitefinity Content item that we resolved in the ItemDataBoundEvent and this will allow us to easily get the list of taxa assigned to it:

Please note the itemsToTake parameter - it controls the maximum number of categories per item that we are going to display. As resolving each category makes a call to the database, we've set that number to 10 intentionally .

Once we have the list of assigned categories what we need to do is load each category, as we currently have only its ID. We can then simply iterate through the list of category IDs, load each category and then using its own Name, the name of the  Taxonomy it belongs to and the name of the single Taxon from that Taxonomy we can construct the filtering URL parameter in a similar fashion: -in-Category/Categories/yourCategoryName . This is the default format our Sitefinity TaxonomyEvaluator is looking for, and it will ensure us the correct filtering behavior. The finishing stop is to combine this with the absolute URL of the page we're currently on and we end up with something like:


With this our job on the custom template is complete - simply build the project and then proceed with specifying the path to the custom template in your widget's advanced settings TemplatePath property, so it will start using the custom template instead of the default one.

For your convenience you can find the complete sample of the custom template attached to this blog post:
CustomTemplates - displaying the categories as clickable links

As an end result you should have the categories you've assigned each item to, displayed as click-able links under each item in the ListView.

A short video demonstrating this functionality can be found here.

As a bottom line I just wanted to point out that although the sample demonstrates achieving this functionality with a News widget, you should be aware of the fact that the approach is pretty much universal, so it can be very easily adapted to any other ContentView based widget if you follow the described steps.

I hope you enjoyed this post, please keep in touch for more useful tips and tricks that can help you customize the product behavior.