FlexGrid with Redux/ngrx best practices

Posted by: philip.johnson on 8 November 2017, 6:15 am EST

    • Post Options:
    • Link

    Posted 8 November 2017, 6:15 am EST

    We’re using FlexGrid in an Angular app and using ngrx to save our state. We’re trying to figure out a good way to combine the two.

    So far we’ve encountered two problems. First, we are retrieving an array of data from our store and passing it into the grid as the itemsSource. However, after some odd bugs cropped up we realized that edits in the grid were actually directly altering our (supposedly) immutable store. Now we are deep cloning the source before we pass it into the table. Is there a better way?

    Second, because of one way data flow, we have each edit in the grid triggering an action to Redux to update the data in our store, which in turn replaces the grid’s itemsSource with a new (cloned) array. This works fine except that the replacement of the source often causes an unwanted flicker of the column as the data updates. It was also causing the selection to return to the first row, although we fixed that by saving the selection as suggested here: https://www.grapecity.com/en/forums/wijmo/flexgrid-and-immutable-ite_1

    Are there any recommended practices of working with FlexGrid and Redux? Or at least any way to avoid this flickering?

    Thanks.

  • Posted 8 November 2017, 5:52 pm EST

    Hi,

    You may update data on rowEditEnded event instead of cellEditEnded. Please try and let us know.

    ~Manish

  • Posted 9 November 2017, 9:57 am EST

    Actually, cellEditEnded seems to work fine.

    However, after some more investigation we discovered that the flickering was coming from an *ngFor directive of our wj-flex-grid-column elements. Adding a trackBy function eliminated the problem.

    Thank you!

  • Posted 10 November 2017, 12:22 am EST

    Thanks for notifying :slight_smile:

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels