Does anyone have an example of how Umbraco grid styles/properties work for booleans? https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/settings-and-styles

Ideally, I want an editor user in the back office to be able to go into a Row's settings, check or uncheck a box, and:

• If checked, apply a css class
• If not checked, don't do anything

Has anyone accomplished this / have a good example of how to do this?

Best, Chris

Edit:

After working on this the proper method (I believe) is to use a radiobuttonlist with prevalues.

So I went down that path, but I'm unable to get the "class" of "restrictContentWidth" applied properly. Instead it's applying the class under the "style" section of the DOM.

Any ideas how to fix this?

Screenshot of the improper DOM rendering:

Screenshot of my settings in action:

Here's the styles I've added in under the "Grid" datatype:

    [
  {
    "label": "Set a background image",
    "description": "Set a row background",
    "key": "background-image",
    "view": "imagepicker",
    "modifier": "url({0})"
  },
  {
    "label": "Background Hex Color",
    "description": "Set a background color in hex format, such as: #FFF000",
    "key": "background-color",
    "view": "textstring",
    "icon": "icon-paint-roller",
    "config": {
      "style": "background-color:#{0}"
    }
  },
  {
    "label": "Restrict Content Width",
    "description": "Enable if you would like this row to have its content width restricted. You should only enable this if Full Width Grid Layout is enabled.",
    "key": "class",
    "view": "radiobuttonlist",
    "prevalues": [
      {
        "label": "Not Enabled",
        "value": "none"
      },
      {
        "label": "Enable Width Restriction",
        "value": "restrictContentWidth"
      }
    ],
    "applyTo": "row"
  }
]