Angular Grid dealing with large datasets

[Frank Alberts]

Hey guys,

I am running into some problems with having a lot of data from the firebase realtime databse using the below approach when I exceed 5000+ records this becomes not the best-optimized approach.

    firebase

    .list('/priceChecks')

    .valueChanges()

    .subscribe((checks) => {

      this.checkGrid.dataSource = checks; //intial data binding to grid

    });

  firebase

    .list('/priceChecks')

    .snapshotChanges()

    .subscribe((checks) => {

      this.checkGrid.dataSource = checks; // sync server data changes to grid

    });

So there is a method to sort and limit the query amount. And this is how far I got with it but I have individual objects on each trigger and I need to feed them to datasource and not even sure if this is the right approach, maybe there is a better method?

    firebase.database

      .ref()

      .child('priceChecks')

      .orderByChild('date')

      .limitToLast(10)

      .once('child_added', function (snapshot) {

 

        console.log(snapshot.val())

      });

[Frank Alberts]

Or maybe there was a way to do paginated results with only fetching the required data for the paginated page?

[Santhosh Iruthayaraj]

Hi Frank Alberts,

Greetings from the Syncfusion Support,

By analysing your query, we found that you have to use custom data binding to achieve the behaviour you want.

Before proceeding with your query, we would like to share the behaviour of the custom data binding feature in EJ2 Grid.

Custom-binding:
https://ej2.syncfusion.com/angular/documentation/grid/observables/

Observable can be used to sending request and getting response and resolve it and emits an object with the help of async pipe. Grid expects an object from the observable. The emitted value should be an object with properties result and count.

For every grid action (such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have sent the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.   

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in ngOnInit. 

If you want to fetch the data for the current page, you have to prepare pagination query for get the data based on the current page and resolve the data using observable. You have to use dataStateChange event to send the request when the page is changed.

We have prepared a sample using custom data binding feature for sending request to the service based on the current page for your reference.

Sample - https://stackblitz.com/edit/angular-ws2fqv-la4y6o?file=service.ts,app.component.ts

Please get back to us if you need further assistance.

Regards,

Santhosh Iruthayaraj