Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor set attribute background-color in a grid cell at runtime

$
0
0

Problem is: I have a grid (smart htmlelements) and when I add a row I want to set the background colour of a cell in the row to a value supplied in the data row - so the cell colour varies between rows.

To enable the ability to intercept the cell formatting I have a template on the column. This is firing and I have the value (say #AABBCC) but I need to set the background-color of the style attribute of the div to this - and that is where life gets difficult.

[Edit: I have expanded the code and redefined the nature of the problem with things I tried that didn't work]

I wrote this

<template id="colourTemplate"><div style="width: 100%; height:100%;"><div smart-if="value == value">      ***<div @attributes=ColourFunction(#AABBCC) >{{value}}</div>***</div></div></template><Grid @ref="cdfGrid1" DataSource=@dsColourDifference Appearance=@appearance><Columns><Column DataField="sample1" Label="Colour1" Template="@colourTemplate"> </Column></Columns></Grid>      @code{         Dictionary<string, object> ColourFunction(string value)        {          var dict = new Dictionary<string, object>();          dict.Add("style", "background-color: " + value);          return dict;        }      }

I need to push the cell value {{value}} into the background-color of the div. The "value" is available as the div output {{value}} and in the smart-if but not for the div attributes. So replace this line

<div style="background-color: #AABBCC">{{value}}</div>

With something that uses the incoming cell {{value}} instead of the hard-coded #AABBCC. The following do not work:

<div style="background-color: {{value}}">{{value}}</div><div style="background-color: @value">{{value}}</div><div style="background-color: @{value}">{{value}}</div><div style="background-color: @{{value}}">{{value}}</div><div style="background-color: @(x => {value;}">{{value}}</div><div style="background-color: @(x => {{value;}}">{{value}}</div>//Last two based on the error message from attempt #3//Code blocks delimited by '@{...}' like '@{ {value} }' for attributes //are no longer supported These features have been changed to use //attribute syntax. Use 'attr="@(x => {... }"

I tried attribute splatting (below) but I have the same issue of pushing the {{value}} into the function parameter that I have doing it inline.

This does not work (compile error)

<div @attributes="ColourFunction({{value}})">{{value}}</div>

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>