Category

Umbraco

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:

App_Plugins/grid/editors/dropdownlist.html

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

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", 
"prevalues": 
[ 
"value_1", 
"value_2", 
"value_3", 
"value_4" 
] 
}

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.

Comments

Post a comment

Fields marked with an * (asterisk) are required


Recent Posts

Tips & Tricks
How to use Cloudflare Workers and Transform Rul...

This post explains how to m...

News
UmbHost Limited is now a Silver Umbraco Partner

We are now officially a Sil...

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

How to use a CSP nonce with...

News
UmbCheckout 1.0.0 & UmbCheckout.StarterKit.Stri...

The stable version of UmbCh...

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

We've been shortlisted! - P...

ADVERTISTING
(Umbraco Hosting)

Umbraco Hosting Starting At €23/month