Create a column of colors with different values in FlexGrid

Posted by: pablo on 19 December 2021, 8:55 pm EST

  • Posted 19 December 2021, 8:55 pm EST

    Hello,
    I have a question related to binding colors to a column in FlexGrid. I would like to show the information as an <input type=”color” disabled/>, and I thought it would be as simple as the code below.

    <c1-flex-grid-column binding="Color" header="Color" width="150">
    <c1-flex-grid-cell-template>
    <input type="color" disabled/>
    </c1-flex-grid-cell-template>
    </c1-flex-grid-column>

    However, it needs a value to be defined, although I’m binding it in the column. How can I rewrite it?
    Thanks
  • Replied 22 December 2021, 3:04 am EST

    Hi,
    While we are using the template or CellTempalte, we need to specify the values and these should be evaluated.
    Hence to render the Input with the colors, please use the following code snippet:

    <script>
    function getColorCode(color){
    var _color = document.createElement("div");
    _color.style.color = color;
    _color.style.display="none";
    document.body.appendChild(_color);
    return RGBToHex(window.getComputedStyle(_color).color);
    }
    function RGBToHex(rgb) {
    // Choose correct separator
    let sep = rgb.indexOf(",") > -1 ? "," : " ";
    // Turn "rgb(r,g,b)" into [r,g,b]
    rgb = rgb.substr(4).split(")")[0].split(sep);

    let r = (+rgb[0]).toString(16),
    g = (+rgb[1]).toString(16),
    b = (+rgb[2]).toString(16);

    if (r.length == 1)
    r = "0" + r;
    if (g.length == 1)
    g = "0" + g;
    if (b.length == 1)
    b = "0" + b;

    return "#" + r + g + b;
    }
    </script>


    <c1-flex-grid id="inlineEditGrid" auto-generate-columns="false" style="height:400px">
    <c1-items-source read-action-url="@Url.Action("GridReadData")"></c1-items-source>
    <c1-flex-grid-column binding="ID" width="80" align="right" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color" header="Color" width="150" template="<input type=color value='${getColorCode(item.Color)}' disabled/>">
    </c1-flex-grid-column>
    </c1-flex-grid>


    Regards.
    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels