Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
200
Update datasource on IgGrid in Angular2
posted

Hi,

I'm wondering how to update the datasource of the iggrid in angular2.

None of the things I tried gives a satisfying result (too slow / functionality broken).

Attached you can find a sample I've created starting from https://github.com/IgniteUI/igniteui-angular2/tree/master/samples/igGrid.

In here I am adding 5000 new records to the current datasource.

You will see that it takes a huge time for the grid to show these and also the paging is broken.

What is a better way to get the expected result?

Ideally, I don't want to add items to the existing datasource but just replace it by a new one with more / less records.

Thanks in advance for your answer.

igGrid.zip
  • 3995
    Verified Answer
    Offline posted

    Hello,

    Thank you for posting into our community.

    In your case you don't want to push the new data into the existing one. This causes triggering change detection cycles for each record and this makes it way too slow.

    Here we want to assign new data to the current one. This will do one cycle and will rebind the grid properly with the new data.

    this.data = products;


    Also add the data source as a separate attribute(remove it from gridOptions), for more accurately and more performant handling of the change detections.

    <ig-grid [(options)]="gridOptions" [(widgetId)]='id' [(dataSource)]='data'></ig-grid>

    I'm also attaching the modified sample.

    Let me know if you need further assistance on this one.

    igGrid1.zip