For whatever reason, Umbraco seem to have missed off a drop down pre value editor from the core grid settings editors.

Below is how to add this editor to your website, this is based on the post found here, but very slightly modified.

First we need to create a new html view in the folder below:


Then in that file you will want to add the code below:

<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>

Finally, to make it usable in your backoffice, add the below json to the settings option on your grid data type:

"label": "CSS Class", 
"description": "Specify a css class", 
"key": "class", 
"view": "/App_Plugins/grid/editors/dropdownlist.html", 
"applyTo": "row", 

You would change the label, description, key and prevalues, to what you require.

You should then see the dropdown list available in the settings for your grid area

I have also created a Gist for this, which can be found here.


Post a comment

Fields marked with an * (asterisk) are required

Recent Posts

How to pass a Content Security Nonce (CSP) to G...

How to use a CSP nonce with...

UmbCheckout 1.0.0 & UmbCheckout.StarterKit.Stri...

The stable version of UmbCh...

Voting is now open for the Green Business of th...

We've been shortlisted! - P...

We have been shortlisted in The Petersfield Awa...

We have been shortlisted fo...

Please nominate us in The Petersfield Awards!

If you believe in what we d...

Browse Umbraco Hosting

Umbraco Hosting Starting At $26/month