Filter select options results in a table cell base on row field

Queries and Resources
,
1

Hi,

I've a table with an editable custom field, used to select a possible category.

image
image1091×413 29.3 KB

When I click on the cell, it opens the select with the options based on a query.

What I'm trying to do, is filter the results based on the department value of the row clicked on.

Static is something like this and it works:
{{formatDataAsArray(category_options.data).filter(option => option.department == "Female" )}}

I have to replace "Female" with the proper department.

The problem is that it's a multiple row selection table, so when I click on the cell is not selecting the row.

The case is the same of this topic, but the accepted solution is not working to me.

Thanks

2

You can add event handler to row click of new table component.

And in the event handler script you can add the the row selcetion.

3

At the moment I've solved using an action and a temporary state.
The action save the department value of the row in the temp state and temp state is used to filter the data in the select.

Edit: I've replaced the action with the click on a cell and it works properly.
Do you think it was possible without using a temp state?
Thanks

4

No, it doesn't work properly :frowning:

I noticed now that the options works, but if I selected a value for a row that is female and later I click on a row that is male, the selected option value disappears since it's not anymore in the array.
It appears again if I click on a female row.
So the data remains in the changesetObject but it's not ok for the UI.

Furthermore, in order to run the insert query, I would like to have all the values in the selectedRows array, while now overwrite_category is undefined.

Is it possible to set the value for overwrite_category in selectedRows array?

5

I solved the last part, merging selectedRows with changesetArray, but I still have the issue with the dropdown select.
Anyone has some input for that?
Thanks

6

Yes, You are right. Here is the key I failed to implement something like cascade select as your use case.

We have not method to change changesetObject and changesetArray in programmatically way.

I still want to find a way to workaround, I still need the same help.

7

I think I found a solution that can be acceptable for our case.

  • temp_department_state with initial value empty
  • in the tags field, I use this data source

{{temp_department_state.value == "" ? formatDataAsArray(category_options.data) : formatDataAsArray(category_options.data).filter(option => option.department == temp_department_state.value || option.department == "")}}

  • as event handler, i set:
    -- on click cell, I set the temp_department_state to value {{currentRow.department}}
    -- on focus, i set the temp_department_state to empty

The only downside is that when you click on the select, the selected values in other rows with different department temporary disappear.

1 Like