Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Roger 195 posts 474 karma points
    Nov 25, 2015 @ 10:38
    Roger
    0

    Grid DataType - Add checkbox option to styling

    Using Umbraco 7
    Umbraco 7

    Hi all, I want to add to the jSon configuration in the styling section of the Grid DataType. Basically, I need to add a checkbox option that will apply a div with a class of 'dim' It will be displayed under the 'set background image' style in the settings for the editors

    I figured i would add something like:

      {
    "label": "Dim background",
    "description": "Dim background image",
    "key": "class",
    "view": "checkbox",
    "prevalues": [
      "dim"
    ]
  },

    Obviously this isnt correct but the label and description is displayed correctly. The checkbox doesnt render though. (see image)

    enter image description here

    Can anyone help me with this please?

    Many thanks

    Copy Link
  • Roger 195 posts 474 karma points
    Nov 25, 2015 @ 11:16
    Roger
    0

    Ok, i think i'll use the radiobuttonlist prevalueeditor, its probably easier.

    However, I need it to behave like the spacing option where it adds a div with a class rather than adding a class to the background image

    Anyone?

    Copy Link
  • Luke 110 posts 256 karma points
    Nov 25, 2015 @ 11:26
    Luke
    0

    I was just going to add this question too.

    I also need a checkbox list as I want the user to add multiple class names.

    In your case the radio button would not work great because once it is active you will not be able to turn it off.

    Does anybody know if there is a VIEW of checkboxlist??

    Copy Link
  • Roger 195 posts 474 karma points
    Nov 25, 2015 @ 11:36
    Roger
    0

    Yeah i think a checkbox would work better for sure. I had it working by adding a new checkboxlist.html to the prevalueeditors in the views but when checked, it adds a class to the background image instead of adding a div with a class like the spacing textbox.

    Copy Link
  • Luke 110 posts 256 karma points
    Nov 25, 2015 @ 11:43
    Luke
    0

    I am not sure why the built checkoxlist doesn't work to be honest, do you?

    Copy Link
  • Roger 195 posts 474 karma points
    Nov 25, 2015 @ 11:52
    Roger
    0 
    <input type="checkbox" ng-model="model.value" value="{{preval}}" /> {{preval}}

    This outputs class:True; at the end of the div. It cant find any prevalues so i assume it needs a reference somewhere.

    <div class='dark' style='background-image:url(/media/1044/14441035391_7ee1d0d166_h_darken.jpg); class:True;'>

    Once i can figure how to output the prevalues, the next step is to get it to add a new div with a class if the checkbox is checked, like this

    <div class="darken"></div>
<div class='dark' style='background-image:url(/media/1044/14441035391_7ee1d0d166_h_darken.jpg);'>

    It can't be too difficult, the 'add spacing' textbox does exactly that.

    Copy Link
  • Roger 195 posts 474 karma points
    Nov 25, 2015 @ 12:01
    Roger
    0

    Im just reading this:

    https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/60368-Grid-Settings-PreValueEditors

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft