Colour row\cell on datagrid based on value in row

Radzen Studio Angular
1

Hello

In LightSwitch we were able to colour cells within a datagrid based on a value. Are we able to do the same in Radzen?
(I also promise to try and stop referring to LightSwitch each time I ask a question :wink:)

Otis

2

Hi Otis,

LightSwtich was excellent product however Radzen is very powerful as well! :slight_smile:

Here is how to define column Angular template with conditions:

<span *ngIf="data.UnitPrice >= 20" style="color: red;">
    ${data.UnitPrice | currency}
</span>
<span *ngIf="data.UnitPrice < 20">
    ${data.UnitPrice | currency}
</span>

image
image.png1920×1080 150 KB

image
image.png1920×1080 132 KB

Best Regards,
Vladimir

2 Likes
3

Hello.

I've tried to use <span *ngIf to show a different glyphicon if the value is true or false but it is not working.
Another question, is it possible to bind the numeric ids from tables with the text that is stored in other DB tables?

Kind regards,
António

4

Hi @asousai9,

We will need to see your actual code in order to tell what could be wrong.

Another question, is it possible to bind the numeric ids from tables with the text that is stored in other DB tables?

If there is a foreign key relationship based on that column - yes. The lookup data video shows how to do this.

5

Regarding the relationships. I'm making something more complex and I'm adding the datagrids manually to the page and not using the CRUD generator! Is there a way to work it around?

6

Is there a foreign key relationship between those tables? If there is you can set the $expand parameter to retrieve the related data. For example in the Product - Category relationship you can set the $expand parameter of the getProducts method to Category. This will retrieve the Category entity of a product so you can then use ${data.Category.CategoryName} in a the Template of a DataGrid column.

7

Thanks.... I've got it working :slight_smile:

For the other situation I used this code:

<span *ngIf="data.produto_final" style="color: green;">
Sim 
</span>
<span *ngIf="data.produto_final != true" style="color: red;">
Não   
</span>

Can I add to this span class I glyphicon with bootstrap with this code?

Thank you