When working with MVC widgets and widget designers, you may need to implement selectors for single or multiple items. The following article explains the basic principles of using such item selectors for various items, such as dynamic items, News items, taxa from a flat taxonomy. Selectors use standard Sitefinity CMS services to get the corresponding items. For example, the NewsService is used to get all created News items. Selectors also set the selected items into the designer properties.
The following example demonstrates how to use the News selector and is divided in two sections - selecting a single News item and selecting multiple News items.
You created a widget with a custom designer view and an AngularJS controller for the widget. For more information, see Create widgets.
Selectors are part of the Telerik.Sitefinity.Frontend assembly. Selectors are implemented as AngularJS directives. To use selectors, you need to:
The controller must have two properties:
The following code demonstrates how to implement the CustomWidgetController_SingleSelector.cs controller:
Next, you implement the custom designer view:
Finally, implement he AngularJS controller:
NOTE: The controller properties are not the same as the ones for the single item selector since they are in plural.
The following code demonstrates how to implement the CustomWidgetController_MultipleSelector.cs controller:
In the code above, to enable selection of multiple items for the selector, you set the sf-multiselect attribute true. Take notice that the attributes that bind the collections of items and item IDs are also different than the ones for a single item selector: sf-selected-ids and sf-selected-items. The selector model properties need to correspond to the ones you defined in the widget designer controller.
Back To Top