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>