Hi
I want a small clarification on one of the use case related to IgrDataGrid (https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview).
I have used IgrDataGrid, in that if we select any row with country USA and then apply filter on country column and removed data for USA. then that selected row for USA is not visible now on grid so we want that it should not be active.
So, for this I need to know how can we achieve that , If there is any solution for this please suggest as I need to implement this in my IgrDataGrid.
Hoping for a positive response.
Thanks!!!
Hello Shubham,
I have been investigating into the behavior you are reporting, and it appears that the activeCell of the grid should not remain for a row or cells that are filtered out. The selection can remain through the filter though.
In order to prevent a selection remaining on a row that is filtered out, you can check the grid’s actualDataSource property with the method indexOfItem. This method will return -1 for rows that are filtered out. If you find that this is the case, you can remove the item from the selectedItems collection of the grid. Therefore, you can remove items from the selection of the grid using the following code:
let item = this.grid.selectedItems.item(0);let index = this.grid.actualDataSource.indexOfItem(item);
if(index < 0){ this.grid.selectedItems.remove(item);}
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
Hello Andrew,
Thank you for your response. Can you please suggest any suitable event in which we can add this code.
Let me know if some other information is required from our end.
Thanks.
I have been investigating into a suitable event to utilize the above code, and I would recommend first handling the filterExpressionsChanged event on the IgrDataGrid. This will notify you that the filters have changed, but unfortunately it fires before the rows have actually been updated, and I’m not seeing an event that fires for the rows being updated as a result of the filters. As such, I would recommend using a window.setTimeout to delay the execution of the selection code. For example:
public onFilterExpressionsChanged(s: IgrDataGrid, e: IgrGridFilterExpressionsEventArgs){ window.setTimeout(() => this.onTimerTick(), 16); }
public onTimerTick(){ let selected = this.grid.selectedItems;
if(selected.count != 0){ let item = selected.item(0); let index = this.grid.actualDataSource.indexOfItem(item); console.log(index); } }
Please let me know if you have any other questions or concerns on this matter.
Thank you for your response. This solution is not working for us, Can you please suggest some alternate solution without doing the setTimeout delay.
Unfortunately, there does not currently exist a dedicated event that I am aware of that will fire after the filterExpressionsChanged event that represents when the rows collection has updated. Perhaps on your machine, the 16-millisecond timeout is too soon and so it has not updated yet? What exactly is not working about the code I provided you?
The only alternative in this case that I could recommend is to have some sort of custom code that would be able to check the filter that you have applied against the selected rows, but this would likely be quite a large amount of custom code as it would need to work for all possible filters applied in the grid.
If you would like to see an event potentially exposed that fires after the rows collection updates to reflect the filters, I would recommend suggesting a new feature request for this event at our Ignite UI for React GitHub page here: https://github.com/igniteui/igniteui-react/issues. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.