Datagrid template

Radzen Studio Angular
1

Hi,

I have a database table with records which have a field (NoteDisplayColour) which contains a Hex colour code. This is shown in the DataGrid component. Is it possible to change the colour (background or text) of the column showing the colour code to actually display using the colour in the Hex field?

I've tried using this template but, it doesn't seem to like using expressions within inline styles:

<span style="color: ${data.NoteDisplayColour};">
    ${data.NoteDisplayColour}
</span>
2

I've sorted this one myself...Angular Dynamic binding seems to work:

image

3

Just a small correction - the Angular syntax should be:

<span [style.color]="data.NoteDisplayColour">
</span>

Didn't know that "this.data.NoteDisplayColour" would work.

2 Likes
4

Thanks for the correction :slight_smile:

5

Can you please show me where you would put this angular syntax. Many thanks

6

This code can be used as column template.

7

I am already using the column template with the following code, is there a way to combine the background colour as well?

<p style="white-space:pre-wrap">${data.JobNo}</p>

image
image2092×1414 176 KB

8

Yes, you can add binding for the backgroundColor similar to the example in this thread.