The introduction of the grid editor in Umbraco 7.2.0 changed the way that many layouts are created adding an amazing amount of versatility to your layouts. One neat feature when creating your grid is the ability to allow your content editors to apply custom classes and styles to the rows and columns in the grid giving them more flexibility when creating pages but ensuring that everything fits in with the rest of your design.
In its simplest form this will present your users with a textbox in which they can type the name of the class to apply. But what if they make a typo or just don't know what classes are available? Fortunately they've already got this covered and, when configuring your grid, you can use one of the predefined prevalueeditors to present your users with a list of styles and classes to choose from.
Out of the box you get the radiobuttonlist prevalue editor which presents your prevalues to the end user as a list of radio buttons. And whilst this works well, it means that once you have selected a class you can't unselect it unless you add a blank prevalue. Rather than go down this route I decided it would be better to create a new prevalue editor that would present the available options as a drop down list with a default value so that your grid configuration doesn't need to contain any superfluous options.
To incorporate this in your project fire up Visual Studio, expand the Umbraco/View/prevalueditors/ folder, create a new file with the name dropdownlist.html and copy and paste the code below in to your new editor.
<select ng-model="model.value">
<option value="" ng-selected="{{model.value == null}}">none</option>
<option ng-repeat="preval in model.prevalues" ng-selected="{{model.value != null && (model.value == preval.value || model.value == preval)}}" value="{{preval.value || preval}}">{{preval.label || preval.value || preval}}</option>
</select>
Now we've defined our new drop down list prevalue editor we need to configure our grid to make use of it. Open up your document type and open up the settings panel for your grid and enter the following JSON replacing value_x with the appropriate classes for your theme.
[
{
"label": "CSS Class",
"description": "Specify a css class",
"key": "class",
"view": "dropdownlist",
"applyTo": "row",
"prevalues": [
"value_1",
"value_2",
"value_3",
"value_4"
]
}
]
Congratulations, you're all done! Now when you're editing your grid layouts you'll be presented with something like this.
Okay, it's not the most revolutionary update to Umbraco but it's a nice addition to the toolbox and, I think, presents the available options in a much nicer and more usable format.