[Data Grid] [How To] Set CSS for a row based on row data

Forge Component
(38)
Published on 3 Aug (8 days ago) by OutSystems R&D
38 votes
Published on 3 Aug (8 days ago) by OutSystems R&D

Hi All,

Can anyone guide me on how best to set row css triggered by particular row data, I know you can do it using OSCellRenderer on the columns but this is problematic as the columns can be removed using the remove menu then the javascript will not fire, I could put the code into each columns OSCellRenderer and assume the user won't remove every column but that seems overkill. also is there any way to block/not show a particular column on the remove menu as I could put it on that column?

Thanks

Neil

Neil Evans wrote:

Hi All,

Can anyone guide me on how best to set row css triggered by particular row data, I know you can do it using OSCellRenderer on the columns but this is problematic as the columns can be removed using the remove menu then the javascript will not fire, I could put the code into each columns OSCellRenderer and assume the user won't remove every column but that seems overkill. also is there any way to block/not show a particular column on the remove menu as I could put it on that column?

Thanks

Neil

You can add a boolean tribute in your list with show or remove the current line, and set with advance properties the display using this atribute


Thank you for your response but I am unsure what you mean, how you use the advanced properties to set a row css using that attribute

Neil Evans wrote:

Thank you for your response but I am unsure what you mean, how you use the advanced properties to set a row css using that attribute

Hi Neil,

Just a example what you can have. 


The "BooleanVar" is just the demo variable.


Hi ,

Thanks for the reply,

I think you may have misunderstood what I am looking for, it appears from you images you are talking about a standard table, what I am looking for is the data grid component not a normal outsystems table  

Neil Evans wrote:

Hi ,

Thanks for the reply,

I think you may have misunderstood what I am looking for, it appears from you images you are talking about a standard table, what I am looking for is the data grid component not a normal outsystems table  

Hi,


the example i show is a standard table, but the same logic is apply to data grid component.


Hi,

So if the below is 1 column of the grid and the main grid structure, how/where  do you enter it in the advancedFormat to look at the Boolean variable, I can't put it in the OSCellRender Javascript because if the cell is hidden via the menu the javascript is not executed 

Neil Evans wrote:

Hi,

So if the below is 1 column of the grid and the main grid structure, how/where  do you enter it in the advancedFormat to look at the Boolean variable, I can't put it in the OSCellRender Javascript because if the cell is hidden via the menu the javascript is not executed 

Hi,


You have in "Advance Format" "Allign:'left'", so you can add that you custom css using the boolean var.


E.g.


"align:'left'"+BooleanVar and add your logic.

Cheers,

Thiago

ok thanks i will give it a go

no problem, can you put mark my answer to soluction please

Solution

Neil Evans wrote:

Hi All,

Can anyone guide me on how best to set row css triggered by particular row data, I know you can do it using OSCellRenderer on the columns but this is problematic as the columns can be removed using the remove menu then the javascript will not fire, I could put the code into each columns OSCellRenderer and assume the user won't remove every column but that seems overkill. also is there any way to block/not show a particular column on the remove menu as I could put it on that column?

Thanks

Neil


Hi Neil,

Attached goes a sample with an alternative solution to the use case you have described.

Take a look to the JavaScript of the page having the definition of some functions and the "CustomFormatter" script at the bottom of the page to redefine the formatter function.

Hope it helps

Solution

Hi Pedro,

That was exactly what I am looking for thank you for the effort of a sample.

Not only did you show me how to format outside each column you actually provided a solution to another post

https://www.outsystems.com/forums/discussion/55970/setting-headersvisibility-to-column-to-hide-first-column/

In the Grid Advanced functions it shows how to set the visibility to column