Independent Cascading Dropdown Columns in Each Row

[bensullivan]

Hi

This question is related to this post I created a couple of weeks ago: viewtopic.php?f=43&t=12330

So we have three columns which are dropdowns populated dynamically from stores loaded from an API at runtime. We now need to apply cascading filtering scoped at the row level.

What I'm seeing is, we create the first row, apply the filtering on the first row and then add a new row to the grid store. But instead of the filtering being reset on the new second row, it is the the same as the first row. This makes sense as the row filtering is sharing the same stores backing the dropdown instances.

I am wondering if you have seen this requirement before and is there an effective way to achieve this with Grid? Do I need separate stores for the dropdowns on each row so the dropdowns of each row can be filtered independently of other rows? This solution sounds resource intensive for grids with a large number of rows..

Please let me know how you think I should proceed.

Many thanks

Ben

[bensullivan]

I guess I could store a filter context for each row? And then apply the context when a row is selected? How would I do that?

[Maxim Gorkovsky]

Hello.
Filtering works on the store level, which means there couldn't be a separate filter for each row. But you can emulate that with complex filtering function that works differently depending on the row. Smth like:

const treeNodeWithFilter = grid.store.getById(...)

grid.store.filter(record => {
  // this record is a descendant of special node with filter
  if (treeNodeWithFilter.contains(record)) {
    // apply branch-specific filters
    return treeNodeWithFilter.filterFn(record);
  }
  
  return true;
})