#1 2017-12-22 03:39:31

reg4app
Member
Registered: 2016-05-16
Posts: 151

Report control:highlight row base on the value of a field(or fields)

Is there a way to make record rows in Report control to stand out on the basis of the rows' specified field value?


Joshua.Y

Offline

#2 2017-12-22 10:13:13

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: Report control:highlight row base on the value of a field(or fields)

Hello to all,

reg4app wrote:

Is there a way to make record rows in Report control to stand out on the basis of the rows' specified field value?

I am not sure if can understand Joshua, please, can you explain a little more?

Online

#3 2017-12-22 12:19:55

reg4app
Member
Registered: 2016-05-16
Posts: 151

Re: Report control:highlight row base on the value of a field(or fields)

ok,I try to explain more specific

A Report control contain a list of records,and each row has a field 'name',
I want to highlight the rows with field ('name')='Joshua',maybe row background color ,or font color,
So these 'Joshua' rows seems different from other row records


Joshua.Y

Offline

#4 2017-12-22 13:35:36

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: Report control:highlight row base on the value of a field(or fields)

Hello to all,

Thanks for the explanation! Certainly, there is more than one way to achieve what you wanted. Here are some of them. We can use the "ng-style" in one or more "TD" elements (if we play with a "Report / table": may more easy if we play with a "Report / grid") in the below way:

<td ng-style="Record.Name == 'Abel' ? { 'background-color': 'green' } : ''">
 [Record.Name]
</td>

The above works, but, maybe we prefer to use a CSS class instead to apply certain style directly, so the code can appear like the below one:

<td ng-class="(Record.Name == 'Abel') ? 'match-name' : ''">
 [Record.Name]
</td>

In the above code, we are set the "match-name" CSS class for a Record's name which is equal to "Abel". Note that we can add more than one CSS class:

<td ng-class="(Record.Name == 'Abel') ? 'match-name other-class' : ''">
 [Record.Name]
</td>

In the above case, we add the "match-name" and "other-class" CSS classes. You know this CSS classes can be defined in the app's Inline CSS option or in a separated CSS file added to the app.

Other additional possibility is to add a CSS when the name is not matched, and, for example, in the below code:

<td ng-class="(Record.Name == 'Abel') ? 'match-name' : 'no-match-name'">
 [Record.Name]
</td>

The above code add the "match-name" CSS class if the Record's "Name" is "Abel", and, on the contrary, add the "no-match-name" CSS class if the Record's "Name" is NOT "Abel".

Try with that code Joshua! Post here if you have any further questions.

Online

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.