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:

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

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.

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: