Returning emty Array as a result (DataResult) for Grid clears the existing rows.

[aakashtechlock]

Hi I am using Angular Grid for one of my use case which has infinity scroll enabled. my problem is when server returns me empty array as a result, and if i pass the same to grid(using observable) as below , the grid wipes out all the previous data loaded in the UI. https://ej2.syncfusion.com/angular/documentation/grid/observables/ <-I have implemented this approach in the code.

{

result: [],

count: 200, // total count of records so far fetched in grid

}

[Ajith Govarthan]

Hi aakashtechlock, 

Thank for contacting Syncfusion support. 

Query: Hi I am using Angular Grid for one of my use case which has infinity scroll enabled. my problem is when server returns me empty array as a result, and if i pass the same to grid(using observable) as below , the grid wipes out all the previous data. 

 

Based on your query you are facing data load issue with infiniteScroll and observables feature. By default, in our EJ2 Grid when you use the observables binding you need to return the data in the form of result and count. 

In the result and count format you need to return the data to be displayed as result and in the count, you need to return the total data count to fetch and display the data properly in the Grid component with infiniteScroll. For your convenience we have attached the sample, please refer them for your reference.   

Code Example: 

Order.service.ts 

export class OrdersService extends Subject<DataStateChangeEventArgs> { 

  private BASE_URL = 

    "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders"; 

  constructor(private http: Http) { 

    super(); 

  } 

  public execute(state: any) { 

    this.getData(state).subscribe(x => super.next(x)); 

  } 

  public getData( 

    state: DataStateChangeEventArgs 

  ): Observable<DataStateChangeEventArgs> { 

    let pageQuery = ""; 

    let filterQuery = ""; 

    // debugger; 

    if (state.take === undefined) { 

      pageQuery = ""; 

    } else { 

      pageQuery = `$skip=${state.skip}&$top=${state.take}`; 

    } // handled the page query 

    let sortQuery = ""; 

    if ((state.sorted || []).length) { 

      sortQuery = 

        `&$orderby=` + 

        state.sorted 

          .map((obj: Sorts) => { 

            return obj.direction === "descending" 

              ? `${obj.name} desc` 

              : obj.name; 

          }) 

          .reverse() 

          .join(","); 

    } 

    // handle the filterQuery 

    if (state.where) { 

      debugger; 

      filterQuery = 

        `&$filter=` + 

        state.where.map(obj => { 

          return obj.predicates 

            .map(predicate => { 

              debugger; 

              return predicate.operator === "equal" 

                ? `${predicate.field} eq ${predicate.value}` 

                : `${predicate.operator}(tolower(${predicate.field}),'${ 

                    predicate.value 

                  }')`; 

            }) 

            .reverse() 

            .join(" and "); 

        }); 

    } 

    return this.http 

      .get( 

        `${ 

          this.BASE_URL 

        }?${pageQuery}${filterQuery}${sortQuery}&$inlinecount=allpages&$format=json` 

      ) 

      .pipe(map((response: any) => response.json())) 

      .pipe( 

        map( 

          (response: any) => 

            <DataResult>{ 

              result: response["d"]["results"],   // data to be shown in the grid 

              count: parseInt(response["d"]["__count"], 10) // total data count 

            } 

        ) 

      ) 

      .pipe((data: any) => data); 

  } 

} 

Sample Link: https://stackblitz.com/edit/angular-ws2fqv-sfrwu6?file=app.component.ts 

Note: in your attached code example you have mentioned the count value as “so far fetched data in the Grid”. So, please bind the total data count instead of fetched data count and also return the total count as zero when you return empty array as data in the Grid component. 

Regards, 

Ajith G. 

[aakashtechlock]

ok so you mean if :

1) I received 100 records in first fetch I will send

{

result: [{},....{}], // actual 100 records

count: 200, // and count as 200 so that grid knows there are more records..... I have to do this because we are fetching data from large data set and we don't know the the total record count before hand } 2) user scrolls down a new request get triggered then we send

{

result: [{},....{}], // actual 100 round 2 records

count: 300, // and count as 300 so that grid knows there are more records..... I have to do this because we are fetching data from large data set and we don't know the the total record count before hand } 3) but I when I give a tried call to the server I receive empty array currently i was sending

{

result: [],

count: 200, // total count of records so far fetched in grid

}

so that grid knows that there are no more new records present in this set and record counts is 200 but seems like this is not working and grid is wiping all the old records too. I tried setting the count field to 0 but same issue its wiping all the previous records present in the

grid

[Ajith Govarthan]

Hi aakashtechlock, 

Thanks for the update. 

Query:  Returning emty Array as a result (DataResult) for Grid clears the existing rows. 

 

By default, in our EJ2 Grid when you use the observables binding you need to return the data in the form of result and count. In that result will contains the current view data and the count is total count of the data to be bind to the Grid component. Using these result data, the current view records are rendered in the Grid and using the count value, we will calculate the scroller height in the Grid component.  So, when the scrollbar reaches the end of the scroller. 

Grid component will trigger dataStateChange event to fetch the next block of records form the API service. Since the observables is the remote databinding, when you return empty data from the service will display no records in the Grid component. Which is the default, behavior of our EJ2 Grid. If you still face the issue, then please share the below details to validate further on your requirement. 

1. Share the complete Grid code example.

2. Share the video demonstration of the reported issue.

 

3. Do you face no records display issue when bound data ?

 

4. Is possible, please share the issue reproducible sample.

 

5. Share the more details on your reported query.

 

6. Share the Syncfusion package version.

 

Regards, 

Ajith G.