adding custom property editor to grid style spectrum colour picker - General

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Brett Spencer 88 posts 259 karma points

Oct 18, 2018 @ 15:52

Adding custom property editor to Grid Style (Spectrum Colour Picker)

General

Umbraco 7

Any ideas how to get this into the grid editor Style?

I expected that the defaults for the prevalue fields to work out of box. Though it would be nice to know how to configure them. (Maybe "config"?)

Tried this:

{
    "label": "Color Spectrum Background",
    "description": "Choose a color for the background",
    "key": "background-color",
    "view": "/App_Plugins/SpectrumColorPicker/SpectrumColorPicker.html",
    "applyTo": "row"
  }

Got this:

Grid Editor Style render from "view" property

Also dug a little more and seeing this error in the console:

 angular.min.js?cdv=1:63 TypeError: Cannot read property 'enableTransparency' of undefined
    at c.spectrumColorPicker (SpectrumColorPicker.controller.js?cdv=1:34)
    at d (angular.min.js?cdv=1:28)
    at Object.instantiate (angular.min.js?cdv=1:28)
    at angular.min.js?cdv=1:53
    at angular.min.js?cdv=1:44
    at n (angular.min.js?cdv=1:7)
    at k (angular.min.js?cdv=1:44)
    at e (angular.min.js?cdv=1:40)
    at angular.min.js?cdv=1:39
    at angular.min.js?cdv=1:158
(anonymous) @ angular.min.js?cdv=1:63

Update: I went ahead and added the config settings thinking that might be the issue and now have this...

Added:

"config": {
  "enableTransparency": "0",
  "preferredFormat": "hex"
},

Now, after clicking, I have this:

enter image description here

So that worked!!!!

Copy Link

Prasad kumarasinghe 4 posts 74 karma points

Oct 15, 2019 @ 06:49
0
HI Can you please let me know where you have added the config - in which file.
```
"config": {
  "enableTransparency": "0",
  "preferredFormat": "hex"
}
```
It didnt work for me.

Please help!

thank you!
Copy Link

Thomas Kold 2 posts 72 karma points

Feb 02, 2020 @ 18:46

Backoffice -> Grid Data Type -> Row configurations.

In this example I am using the ColorPickerU8

  [
  {
    "label": "Backgroundcolor",
    "description": "",
    "key": "background-color",
    "view": "/App_Plugins/ColorPickerU8/ColorPicker.html",
    "config": {
      "enableTransparency": true,
      "predefinedColor": [
        {
          "value": "#000000"
        },
        {
          "value": "#ffffff"
        }
      ]
    }
  }
]

Copy Link

is working on a reply...

Please Sign in or register to post replies