Within our application, users can navigate to different records without having to reload the web page; we just populate the data in all of the UI elements with the requested record's information.
The problem that we are having with the angular grid is that the user has to mouse over the grid in order to see the updated changes, which is not intuitive.
We have tried using the internal method refreshGridState and that does cause the data to reload, but it also has a nasty side effect of losing all of the column configuration (i.e. captions, visible, etc).
The grid is bound to a simple data array, which we picked up from the samples, but I strongly suspect this is not the correct approach for our scenario.
Is there a recommendation on a better approach to this? Is there anything else that we need to be aware of with this approach (i.e. clearing transactions?) (we already clear row selections and filters before assigning to the data array).
Hello Karl,
Thank you for contacting Infragistics Community!
I believe you will find the following sample I have prepared for you very helpful. As you can observe the grid automatically reflects the changes when its data source is dynamically switched.
If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.
Looking forward to hearing from you.
Best Regards, Martin Evtimov Associate Software Developer Infragistics, Inc.
Thank you for the sample.
One of the differences in our implementation is that we are assigning the new data set directly to the grid's data property. We did this because we were trying to resolve the issue reported in https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular/122820/issue-with-grid-row-selector-when-changing-from-no-records-in-the-grid-to-records-in-the-grid
(That is filed as a different user because that account is associated with our licenses and I didn't realize this account would be blocked from posting immediate content).
Unfortunately I can still reproduce this in our application when I remove the call to grid.cdr.detectChanges.
I suspect I know why this can't be reproduced in the sample:
In our application, the request that triggers the load is not in the same angular scope as the grid (the grid is hosted in an aspx page along with a bunch of other controls). I think that pressing the data button in the sample causes angular to trigger an independent change that happens to get the grid caught up in it. I believe this is why our call to grid.cdr.detectChanges works, but isn't required in the sample.
Thank you for getting back to me!
You’re correct that clicking the button within the provided sample triggers an Angular change detection cycle. Please note that the igxGrid component uses OnPush ChangeDetectionStrategy. Modifying its input data property will mark it as dirty and it will wait for the next change detection cycle in order to update itself. However if the button you’re clicking is out of the scope of the Angular application containing the igxGrid clicking over it won’t trigger new change detection cycle and you have to do it by yourself. If this is the case you have to call the grid.cdr.detectChanges() or the detectChanges of the component hosting your igxGrid.
Please let me know if you need any further information!