Conditionally styling a selected row in a table based on the Primary Key of the row
Question
Application Type
Reactive

Hello,

I have a page that contains table with a link on one of the columns that refreshes the page and displays information underneath the table, relevant to the row that was clicked. How can I highlight the row of the table that was selected, so the user can visually see which row they have selected. 

When I try to conditionally set the table-row class, only the top record is the one that is being compared. So, for instance, if I select the top record, then the style class will be applied to every row and not just the selected one. The only reason the class is being applied, is because it is comparing it to the top record and not the actual one that was selected.


Thank you.

Champion

Hi Milos Stankovic,

Sorry, I don't understand what is mean by "The only reason the class is being applied, is because it is comparing it to the top record and not the actual one that was selected. ".

If possible please share the oml file, then we can check in to it.

If you can't share the oml file, plese least provide more detailed information, such as the screeen shot of conditons

Regards

Hi Milos Stankovic,

For what I understanding is that you are trying to highlight a current selected row. Then this is one possible solution:

1. Adding new attribute in your aggregate: IsEdit with default value is False.

2. When the link is click all a client action to set the Current IsEdit = True. 

3. Using ListFilter with Id <> Current.Id then loop the ListFilter.Result and set IsEdit = False.

4. In UI, apply the highlight css for row that have IsEdit = True.

Hope this helps,

Khuong

Let me clarify:

Page contains a table and information relevant to the selected record from the table below it. Table displays 5 records. Each record contains a link in one of their cells that, when clicked, redirects them to the same page they are on while passing in the selected record's ID. The selected record should be highlighted in the table so the user knows that that was the record that was selected prior to coming on to this page.

What I meant by, "The only reason the class is being applied, is because it is comparing it to the top record and not the actual one that was selected", is that I was setting a conditional style class to the table-row class using logic similar to this: "table-row" + if(SelectedId = GetTable.Current.Id," table-row-selected",""). I created a custom class called "table-row-selected" that sets the background to a different color. When I choose any record that is not the first record in the table, no style classes are applies. When I choose the first record in the table, the style class is applied to every row. The reason I believe this is happening is because it is using the "GetTable.Current.Id" value and it has no sense of the current row and instead takes the top record returned from the table.

Hi Milos Stankovic, 

Is your app Traditional or Reactive? If reactive then no need to redirect to same page, just updating the selected value is enough.

Regards,

Khuong

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.