Cell background colour Blazor

[xyzzy]

I am looking to set the background-color of a cell on a row-by row basis.  I have the colour as #XXXXXX as the text value in the cell, what I want to do is set the background colour of the cell to this value.
I have looked at templates and div smart-if (that together gives me cell level control) but I cannot seem to set the div background-color to the value.  I need something like below:
<template id=”colourTemplate”>
<div style=”width: 100%; height:100%;”>
<div smart-if=”1 >= 1″>
<div style=”padding: 4px; background-color: {{value}}; “></div>
</div>
</div>
</template>
If this cannot be resolved with a div is there something else I can inject in instead that will allow me to set the colour?

[admin]

Hi,
That can be achieved by using templates for all columns. We do not have a row template in the Grid component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[xyzzy]

Don’t need row templates.  I have tried using a column template but there doesn’t appear to be anyway to inject the {{value}} into the background-color attribute of the div – and that is what I need.  value has the format #FFFFFF
This is fine if the background-color is fixed at compile time as per all of the examples:
<div style=”padding: 4px; background-color: #AABBCC; “>{{value}}</div>
I need to inject the {{value}} into the background-color (replacing the hard-coded #AABBCC).  This throws a compile error:
<div style=”padding: 4px; background-color: {{value}}; “></div>
If you believe this is possible then please post the code.
I have tried attribute splatting but this only moves the problem into how do I inject the {{value}} into the function parameter.

[admin]

Hi,
Unfortunately, your requirement is not supported with the current API of our DataGrid component. We will create a work item to add support for it in future versions.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[xyzzy]

Peter,
Thanks for all your efforts resolving this, especially as this was all done over the weekend.
<template id=”colourTemplate”>
<div style=”width: 100%; height:100%;”>
<!– Note: this shows a few designer errors but works–>
<div style=”background:{{value}};“>&nbsp;</div>
</div>
</template>

1. Set the background not the background-color;
2. Set the div content to be &nbsp; as an empty div content doesn’t display anything.

Again, thanks for the excellent support.
 

[Author]

Posts