U4-6297 - Add Settings to Grid Controls

Created by Matt Muller 19 Feb 2015, 23:17:19 Updated by Lars-Erik Aabech 08 Apr 2016, 13:23:56

Relates to: COU-266

Relates to: U4-8305

I've spent 3 solid days with the grid for a large new project and have built out 6 custom grid editors. One thing I found that I was "constantly" doing was creating a settings ui for the custom editor.

As an example, one editor is a Headline with 3 different lines, all styled differently - styling them via the custom editor css is fine, but the client also wants the ability to show or hide a logo next to the headline. I could have placed a checkbox somewhere in the editor.html but then that messes with the whole WYSIWIG thing we have going.

I found it would be much better if I could add "settings" to a custom grid control just like I can add them to a cell or row - of course I could write a new PE that handles all that but I managed to get it working and re-using the current settings dialog + controller that you have in place.

I essentially inject a new "edit button" that appears when you hover over the control - clicking on it allows you to edit attributes that you set for the control in grid.editors.config.js. So in my example above I simply add the directive to the editor.html and setup my custom grid control as: { "name": "RWC Headline", "alias": "rwc-headline", "view": "/app_plugins/rwc.grid.headline/editor.html", "render": "/app_plugins/rwc.grid.headline/editor.cshtml", "icon": "icon-coin", "config": { "settings": [ { "label": "Hide Background?", "description": "Check if you want to hide the gray'ish background color for the header", "key": "hideBackground", "view": "boolean" } ] } }

so then in my custom view I can use control.value.settings.showLogo ("normal" values still live at control.value). and in my custom renderer I can use Model.value.settings.showLogo

PR to come.


Shannon Deminick 20 Feb 2015, 08:24:07

PR here: https://github.com/umbraco/Umbraco-CMS/pull/642

Will review later and see if this is this is inline with the future vision of the grid editors.

Matt Muller 21 Feb 2015, 07:28:47

OK, no worries - i'll demo it to Niels/Per at uWestFest. So far I've used it to quickly (by adding simple json) add settings to custom grid editors for:

Custom Image Grid Editor:

  • turn on/off a shadow around the image
  • make the image "full-bleed" so it expands out past the container

Headline Grid Editor:

  • turn off the background color (shown in above example)

Claus Jensen 15 Jan 2016, 09:05:40

PR for 7.4 needs to be reviewed: https://github.com/umbraco/Umbraco-CMS/pull/1024

PR for 7.3.5 has been reviewed, pulled in and fixed up a bit to reuse the existing settings dialog/code.

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions:

Due in version: 7.4.0

Sprint: Sprint 6

Story Points: