Posted 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