Copied to clipboard

Flag this post as spam?

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


  • lori ryan 129 posts 436 karma points
    May 28, 2020 @ 14:45
    lori ryan
    0

    Approved backgroundcolor grid layout

    I would like to add an approved background colour picker to the grid in umbraco.

    Ive added the following in

    {
        "label": "Background color of columns",
        "description": "Choose background color",
        "key": "background-color",
        "view": "colorpicker",
        "applyTo": "cell",
        "prevalues": [
          "#D30535",
          "#81E6E0",
          "#109D95",
          "white",
          "#53B3AE"
        ]
      },
      {
        "label": "Background color of row",
        "description": "Choose background color",
        "key": "background-color",
        "view": "colorpicker",
        "applyTo": "row",
        "prevalues": [
          "#D30535",
          "#81E6E0",
          "#109D95",
          "white",
          "#53B3AE"
        ]
      }
    

    which gets me by colour picker but on my front end its rendering the following html

        <div background-color="{
      "value":"53b3ae",
      "label": "#53B3AE";,
      "id": "3";
    }">
    

    Any idea how I can get this to render correctly?

  • Brendan Rice 304 posts 467 karma points
    May 28, 2020 @ 16:05
    Brendan Rice
    0

    What does your front end code look like Lori?

    Here's what the docs say:

    https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/Color-Picker/

    Try

    @Model.Color.Value

    or

    @Model.Color.Label

  • lori ryan 129 posts 436 karma points
    May 28, 2020 @ 18:32
    lori ryan
    0

    Thats what am trying to figure out. Am editing the grid render to make it work. I have it working but not very elegantly. I've had to split the json to be able get the hexdec value. :-( not pretty but it works

  • Matthew Wise 235 posts 995 karma points MVP c-trib
    May 29, 2020 @ 14:00
    Matthew Wise
    1
    "prevalues": [
      "#D30535",
      "#81E6E0",
      "#109D95",
      "white",
      "#53B3AE"
    ]
    

    I think this would need to be:

    "prevalues": {
      "useLabel": true
       "items": [
        {value: "#D30535", label: "Name of Colour"},
        ...
      ]
    }
    

    I have not tried this but I think its correct looking at the prevalue code for that view.

    Matt

Please Sign in or register to post replies

Write your reply to:

Draft