Hi Harshad,
The flickering is most likely caused by saving the grid configuration on every filter change. When the user types quickly, multiple changes can be triggered before the previous save has completed, so the requests can finish in a different order and overwrite each other.
I wouldn't switch to OnEnter / OnLeave for this. Those events are not really intended to control the Data Grid 2 filter lifecycle. The filter widgets expose an On Change event, which is triggered when the filter value changes.
If you're using the standard DG2 filter widgets, I would first check the On Change Behavior → Apply after (ms) setting. For Text Filter and Number Filter, Mendix provides this specifically to delay applying the filter while the user is typing. The default is 500 ms.
Also, if the JSON is only being stored to persist the user's filter configuration, I would avoid maintaining a separate persistence flow if possible. Data Grid 2 already has Store Filters in Personalization, which is intended to persist filter states. Mendix supports storing the filter state as part of the user's personalization settings.
If you do need the custom persistence entity because you have additional requirements, I would decouple the filter interaction from the persistence save. In other words, don't commit the JSON entity for every keystroke. Save the final filter state after the user has stopped changing it, and make sure only one save operation for a given user/grid configuration can be processed at a time.
So I would try this order:
The important distinction is that debouncing the UI input and preventing concurrent persistence writes are two different things. A JavaScript debounce alone won't completely solve the problem if already-started save requests can still complete out of order.
Hope this helps.
Hi Harshad,
Switching to OnLeave or OnEnter will reduce the flickering, but I'd treat that as a partial fix. The real cause is that every keystroke triggers a commit and refresh, so the grid re-renders while the user is still typing. A debouncer in JavaScript can only delay that, it can't stop it.
Here is what I'd do, roughly in order of effort:
I'd start with OnLeave plus a longer delay. If it still flickers, look at the commit and refresh behaviour next.
Kindly mark this as the accepted answer if it helps.