Hierarchical taxon selector
This tutorial demonstrates how to add a hierarchical taxon selector in a widget's designer view. You can select taxa from a hierarchical taxonomy like Categories or a custom classification of your choice. For more information about categories in Sitefinity CMS, see For developers: Hierarchical taxonomies. For more information on custom classifications in Sitefinity CMS, see Create custom classifications.
To add a Hierarchical taxon selector, in your DesignerView.YourView.cshtml
file, place one of the following tags anywhere in the HTML code:
Single item selection:
Multiple items selection:
The values of the attributes are scope properties that you define in the MVC widget controller.
Attribute |
Description |
sf-selected-item-id |
Single select only. Stores the ID of the selected item. |
sf-selected-item |
Single select only. Stores the serialized information of the selected item. |
sf-selected-ids |
Multi select only. Stores the IDs of the selected items. |
sf-selected-items |
Multi select only. Stores the serialized information of the selected items. |
sf-provider |
Configures the provider to use when retrieving the items to display. |
sf-taxonomy-id |
Accepts a scope property holding the GUID of the taxonomy. For more information see Taxonomies. |
To access the selected value, you use the sf-selected-item
and sf-selected-item-id
attributes. If multiple selection of items is enabled, you must use the sf-selected-items
and sf-selected-ids
attributes. For more information on multiple selection of items, see Use content item selectors.
By default, the selector shows only categories but you can modify it to work with a hierarchical taxonomy of your choice. You do this by specifying a sf-taxonomy-id
attribute that accepts a scope property holding the GUID of the taxonomy. For an example on how to find the ID of a taxonomy, see Hierarchical taxonomies API
You can specify the dialog header using the sf-dialog-header
attribute. By default, the dialog header is Select but if you set sf-dialog-header="Department"
, then the header is Select Department.