In one of my previous articles I described new Color Picker widget. Today I’d like to show another simple property. I prepared extended version of the SelectOneAttribute. This extensions allows developers to configure SelectionFactory, that returns items with icons and CSS classess. This allows us to visually emphasize the importance of values in the list, for example, by giving a different background color or icon. I haven’t prepared nuget package, because there are just few files that have to be copied to the solution.

Extended SelectionFactory

First we need to add an extended version of SelectOneAttribute. The new atrubute uses for list items an instance of the ExtendedSelectItem class, which adds new fields to the menu list. Those information are send to client editor

Below is an extended SelectItem

The next step is to create an editor. In fact, it is just an extension of the standard widget used to display the list. An icon and a class are added for each menu item.

and few styles used to show icons:

Editor javascript and styles have to be copied to site client resources directory which depends on configuration. Usually it’s “ClientResources/Scripts/Editors” folder.

Code, together with an example is available as github gist