JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Cell background colour Blazor
Tagged: Grid background-color Blazor
- This topic has 4 replies, 2 voices, and was last updated 2 years, 11 months ago by
xyzzy.
-
AuthorPosts
-
September 17, 2021 at 4:21 pm #102224
xyzzy
MemberI 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?September 18, 2021 at 2:44 am #102226admin
KeymasterHi,
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/September 18, 2021 at 11:43 am #102227xyzzy
MemberDon’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.September 18, 2021 at 3:59 pm #102230admin
KeymasterHi,
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/September 20, 2021 at 10:12 am #102240xyzzy
MemberPeter,
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}};“> </div>
</div>
</template>- Set the background not the background-color;
- Set the div content to be as an empty div content doesn’t display anything.
Again, thanks for the excellent support.
-
AuthorPosts
- You must be logged in to reply to this topic.