I have two ag-grids that I am moving items between; one is a searchable list of available items, and the other is a list of the items that the user has previously chosen to add. Users can add items to the below grid by selecting them from the top grid and clicking "add." They can remove items from the bottom grid by selecting them in the below grid and clicking "remove." Above the top ag-grid, I have a search box that is set as a Quick Filter for that grid.
When a user removes an item from the bottom grid, I want it to show in the top grid, regardless of whether it should be filtered out based on the quick filter.
For example, if the user is searching for "Apple" in the top grid and the results are the following:
and the list of previously selected items in the below grid is the following:
If the user clicks "Pizza" and clicks "remove," I want the top grid to show
Even though "Pizza" does not meet the quick filter criteria.
I've read through the ag-Grid filtering documentation and can't find a good way to do it. The best I can think of is to use JQuery to add rows to the grid, but then I'll have to keep track of the added/removed rows outside of Angular which could be a headache. Is there an easier way to do this?
I would add a hidden column to the top table to flag new additions from the bottom. Then filter on both the search terms OR the presence of this flag.
If you want to clear the additions flag when they change the search criteria you can hook into the
Or more simply, you could just copy the current search term to this hidden column when they add the rows to the top table. And clear it via the
onFilterModified event when they change the search criteria.