Add hierarchical tree view in the Categories widget

The Categories widget by default has just one view that shows all available categories as a flat list.
This tutorial demonstrates how to create a view that displays a tree, which preserves the hierarchy of the categories. For example:

Categories tree

You first configure the Categories widget and then add and implement the new categories view.

Enable Hierarchy mode in the Categories widget 

  1. Open the widget designer.
  2. Under Which categories to display?, select one of the following options:
    • Top level categories only
    • All categories under particular category...
    • Only categories used by content type...
  3. Click the Advanced button.
  4. In the FlattenHierarchy field enter False.

    NOTE: After setting this option to False, the widget will start performing additional calls to the database for each taxon, so that it retrieves its children. For a very large taxonomy, this may decrease the performance of the widget.

  5. Click the Save button.

Add new view to the widget

  1. In the ~/Mvc/Views/HierarchicalTaxonomy/ folder, create a new file named HierarchicalTaxonomy.[YourViewName].cshtml.
  2. Click Edit in the upper right corner of the widget and open the Settings tab page.
  3. From the Template dropdown menu, select the newly added view.

Implement the view

The view model contains a Taxa collection of objects of type Telerik.Sitefinity.Frontend.Taxonomies.Mvc.Models.TaxonViewModel. Such objects contain a SubTaxa collection that contains the child taxa.

In your new view, you recursively render each level of children. In the code below, you add buttons marked with the attribute data-sf-toggle to expand and collapse the inner categories. Each sublist of categories is marked with the attribute data-sf-submenu. These attributes help implement the expanding and collapsing functionality with JavaScript.

You insert the JavaScript code directly into the view's file with the help of a <script> tag. In the JavaScript below, you attach a click event handler to each expand and collapse button. In addition, you add and remove CSS classes to the buttons and the sublists, so that you can show and hide them.

The CSS code formats the tree and applies styles to the expand buttons and the sublists of categories. You can insert this code in the view's file, using a <style> tag.

Use the following example for the code of the view:

Additional resources

ARTICLES

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Tags

Was this article helpful?