Selected row doesn't follow when working in expanded rows

💬 App Building
1

In a table with expandable rows, clicking on a row expands it and sets the "selectedRow" (and "selectedDataIndex") to that row.

After that it is possible to expand several rows and the "selectedRow" follows to the latest we have clicked on.

In the expanded areas I have components displaying data and also for data input.

The problem is that "selectedRow" doesn't follow if I move from one expanded area to another. So if it is resting on one row and I start to input data in the expanded area of another row, then when I use our update query it is given the "selectedDataIndex" of the wrong row.

It would be better if the "selectedRow" followed to the corresponding row whenever we click inside an expanded area.

3

Hey @davblo,

Yes, this is a current limitation of using "selectedDataIndex" to define the values of the nested components.

Although I don't like it, and it doesn't always apply, I tend to keep only one expanded row open so when users select a row/expand a row any previously expanded row will close. This ensures that users only trigger queries for the right selectedDataIndex.

If this could work for your use case let me know and I can share the script I have in case of select/expand Row

4

I solved this by putting the "Update" button within the expanded area.

Then an array of buttons is created, one for each expansion.
For the Onclick action, instead of running the query for updating directly I run a simple script which feeds that particular button's "i" value as an additional scope variable "indexToUpdate" to the query.

queryUpdateDetails.trigger({additionalScope: {
  indexToUpdate: i
}});

The query then uses indexToUpdate instead of selectedDataIndex to pick out the right values.

eg.
Filter by..
{{ table27.data[indexToUpdate].Item_Id }}

Key value pair.. (textInput7 is in the expandable area)
Description {{textInput7[indexToUpdate].value}}

So regardless of which row happens to be selected, the update uses the correct data in the expanded area where I click "Update".