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

News
.NET 9 Now Available

DotNet 9 Has been rolled ou...

News
Black Friday 2024 - FREE Umbraco Forms licence!

How to claim your FREE Umbr...

Umbraco
How to deploy Umbraco using Web Deploy from Azu...

How to deploy Umbraco using...

Umbraco
How to deploy Umbraco using Web Deploy from Git...

This blog post shows how yo...

Umbraco
Umbraco Medium Security Vulnerabilities - 22nd...

Security patches now availa...

ADVERTISTING
Browse Umbraco Hosting

Umbraco Hosting Starting At $26/month