I have a table or records and I have a local parameter selectedItem. In the table row styling I have: "table-row" + If(SelectedItem.Id = TableName.List.Current.ValvontaProjekti.Id, " table-row-selected", ""). In the table cell I have OnClick trigger to "SelectTableNameItem" client action.
When I click the cell, I see that the SelectTableNameItem works as it also updates a block that shows more details about that particular item. However, the CSS styling works in weird ways: It changes the styling of all rows. This means, if my table-row-selected is set to dark blue, all of my list items turn blue.
If I repeat the same idea but use list instead of a table and list-item-selected css class instead and do everything else identically, it works perfectly. The problem seems to be that changing the row styling applies to all rows, while in lists it defined for each line individually.
So here are my questions:1. Is this a fundamental "property" of a table type element, or am I doing something wrong? Is it doable with table type elements?
2. Is it possible to attach an event to the whole row instead of a single cell one by one by grouping the cells? It seems I cannot wrap the row inside a container either.
Hello
Unfortunately, we cannot directly change the CSS on a row level, if we have to apply the CSS conditionally then we have to add this on each column,You can find the great explanation for this by @Dorine Boudry On the posthttps://www.outsystems.com/forums/discussion/80673/reactive-web-app-conditionally-styling-in-the-table-properties/
There is also a solution available for the same issue, you can refer to that.I hope this can help you with this
Best RegardsTousif Khan
Thanx Tousif, you saved me the trouble of searching for that old post.
😀
Thanks!
I'm rather new to CSS and the Standard UI theme. Is there an existing class for row cells & Selected row cells that I could use similarly as I did with table-row-selected ?
-Aki
Hi Aki,
A.f.a.i.k. you can't group the cells of a row for styling or events.
1) For styling, the answer is that you'll have to apply it to individual cells. The row styling property of the table widget gets evaluated at moment table is first rendered, so if you refer to current in that styling, it is whatever is current at that time. I have answered to a post a while back with a demo oml, I 'll check if I can find it.
2) for events, I made a forge component called OnRow that let's you define row level events to be handled.
Dorine