Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ColorPicker for Umbraco Grid DataType Settings/Style sections
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
<ul class="thumbnails color-picker">
<li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval}">
<a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval}}">
<input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
Copy link

pbres commented Sep 15, 2016

  1. Copy colorpicker.html to Umbraco\Views\prevalueeditors
  2. Place editor config in Settings\Style section of Grid Data Type, eg:
    { "label": "Color", "description": "Choose main color theme", "key": "class", "view": "colorpicker", "applyTo": "cell", "modifier": "color-theme-{0}", "prevalues": [ "1041cd", "ab8fbf", "f1e300", "" ] }

Copy link

charlieanstey commented Nov 22, 2017

This appears to have stopped working, for me at least. I'm running 7.7.6. When selecting a color in the backoffice, I get TypeError: Cannot read property 'hasOwnProperty' of undefined.

Had a quick look, since U4-5322 was implemented a change was made to the ColorPickerController which does a hasOwnProperty check on the existing model.value when toggling:

Not sure about a fix. It's almost as though a value should be set by default, otherwise I'd expect one to always get the undefined error when initially selecting a color.

Copy link

charlieanstey commented Nov 22, 2017

I made a tweak to this earlier to get it working based on the updated colorpicker.html (using Umbraco 7.7.6). I have forked and updated to provide an example:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment