Selected row color

[s.alpaslan]

I know how can I change selected table row with jquery or pure javascript but How can I do this with wappler ?

[brad]

Maybe this doc will help point you in the right direction?

Set Table Row Background Color with Dynamic Value

You can change the table row background color, depending on a dynamic value from your database thanks to the dynamic attributes available in Wappler. In this tutorial we will show you how to use the default background color classes available in Bootstrap 4, but you can assign your own classes to the table rows. We created a dynamic table, which shows the data from our database. We want to use a red background when the quantity from the database is less than 50: [Screenshot_5] Select the table…

[s.alpaslan]

thanks @brad I know this doc but I need change only selected row colour.

[Teodor]

What does:

only selected row colour

this mean?

Please explain this a little more detailed.

[s.alpaslan]

Hello @Teodor,

maybe this image can help .

[s.alpaslan]

ok solved

dmx-class:text-success="$index == varSelectedRowIndex.value"

[Teodor]

That’s indeed the way to style a row which you click - using a variable and storing the selected index there.

[Heather_Mann]

Just leaving the full row code here as it took me a while to figure out the whole thing.

<tr dmx-on:click="sc_tripbits_paged.load({trip_id: trip_id});selected_index.setValue($index)" dmx-class:bg-success="$index == selected_index.value">

selected_index is the variable. this sets the background color, instead of the text color as per the original request. This also loads a server connect with the clicked row value.

[Heather_Mann]

If your table is paged using $index doesn’t work properly as when you change pages the same row number stays highlighted, even though it’s not the one that was selected. A better way is to use the unique id of the record, in my case trip_id like this…

<tr dmx-on:click="sc_tripbits_paged.load({trip_id: trip_id, offset: query.tripbits_offset, sort: query.tripbits_sort, dir: query.tripbits_dir});selected_index.setValue(trip_id);data_detail_trips.select(trip_id)"
 dmx-class:bg-success="trip_id == selected_index.value">