Grid Datasource when using local data as Observable

[Sathyanarayanan Srinivasan]

I am trying to implement a data service for the angular grid component. The only difference here is that I already have the data locally and I am just transforming it based on DataStateEventArgs recieved, such as Sort, Paging, Group, etc.

Here is the most relevant piece of data service code (adopted from previously working code, which fetched from httpClient).

  public execute(state: DataStateChangeEventArgs): void {

    this.fetchCountries(state).subscribe(x => super.next(x as DataStateChangeEventArgs));

  }

  protected fetchCountries(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> {

     // do other things to get the data into sliced[]

    

    let finalResult: any;

    console.log('Check stateData:: grouping: ' + JSON.stringify(state.group)

      + ', dataSource: ' + state.dataSource + ', action: ' + !isNullOrUndefined(state.action));

    if (isNullOrUndefined(state.dataSource)) {

      if (!isNullOrUndefined(state.group) &&

        (isNullOrUndefined(state.action) || !isNullOrUndefined(state.action['rows']))) {

        let groupedResults = sliced;

        state.group.forEach(grouping => { groupedResults = DataUtil.group(groupedResults, grouping); });

        console.log('Scenario: filtered countries (dS:undef, group:y, action:undef) : ' );

        finalResult = { result: groupedResults, count: totalCount } as DataResult;

      } else {

        console.log('Scenario: filtered countries (dS:undef, group:undef, action:na) : ');

        finalResult = { result: sliced, count: totalCount } as DataResult;

      }

    } else {

      console.log('Scenario: filtered counmtries (dS:y, group:na, action:na) : ');

      finalResult = sliced;

    }

    // return the result as observable...

    console.log('dataSource notified: ' + JSON.stringify(finalResult));

    return new BehaviorSubject(finalResult).asObservable();

  }

I can see the data service execute() is engaged. After the same, I can see the dataBound event is fired. However, the grid still shows 'No records to display'. Is there a particular way to pass local data as Observable? I have tried many ways of creatting an Observable that is valid in Angular, but every time its the same result.

Thanks and best regards,

Sathya

[Thavasianand Sankaranarayanan]

Hi Sathyanarayanan, 

Greetings from Syncfusion support. 

We have already documented for your requirement in the following link. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables 

If you still facing the same issue then please provide the following details for providing better assistance. 

1. Share screen shot or video demonstration of the issue.
2. Share the stack trace details if you face any script error in console window.
3. We suggest to bind the actionFailure event to the Grid and ensure whether this event will invoke. If this event will invoke then you can find the cause of this issue easily in this event arguments. Because this event will trigger only when any Grid action failed to achieve the desired results.  Also, please share this event argument details to us
4. Share complete Grid code example.

Regards, 

Thavasianand S. 

[Sathyanarayanan Srinivasan]

Thanks Thavasianand. As soon as I remove the async pipe from the datasource attribute, this worked like a charm. here are the changes I made to data service and component... just to document the closure, so it can benefit other forum members :)

// Data Service (getData(): Observable<DataStateChangeEventArgs>)

// return the result as observable...

    console.log('country dataSource notified: ' + JSON.stringify(finalResult));

    return of(finalResult).pipe(map((data: any) => data)); // works with Angular@8.2.9

// Component (class level attributes)

ds: DataStateChangeEventArgs;

// Component (onInit())

this.dataService.getData(this.state).subscribe((pagedData) => this.ds = pagedData);

    

[Thavasianand Sankaranarayanan]

Hi Sathyanarayanan, 

Thanks for your update. 

We are happy that the problem has bee resolved at your end. 

We have different type of databinding concepts in the following documentation. Please check this for further details. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observable-binding-using-async-pipe 

Link: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#local-data 

Regards, 

Thavasianand S. 

[Sathyanarayanan Srinivasan]

Hi Sathyanarayanan, 

Thanks for your update. 

We are happy that the problem has bee resolved at your end. 

We have different type of databinding concepts in the following documentation. Please check this for further details. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observable-binding-using-async-pipe 

Link: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#local-data 

Regards, 

Thavasianand S. 

Hello,

The final solution with this thread had been working fine so far. This morning I upgraded Syncfusion packages and my package.json now shows all syncfusion packages are @17.4.39.

Since the upgrade there has been compile warnings 'dataSource is deprecated. But I cannot find any suggestions on what . is the replacement. I checked back on your documentation site, there is no change in the samples and snippets.

Now i see this error in when data is fetched and refreshed to dataSource.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'querySelector' of undefined

TypeError: Cannot read property 'querySelector' of undefined

    at Render.emptyRow (ej2-grids.es2015.js:4470)

    at Render.renderEmptyRow (ej2-grids.es2015.js:4466)

    at Render.dataManagerFailure (ej2-grids.es2015.js:4646)

    at ej2-grids.es2015.js:4410

    at ZoneDelegate.invoke (zone-evergreen.js:359)

    at Object.onInvoke (core.js:39699)

    at ZoneDelegate.invoke (zone-evergreen.js:358)

    at Zone.run (zone-evergreen.js:124)

    at zone-evergreen.js:855

    at ZoneDelegate.invokeTask (zone-evergreen.js:391)

    at resolvePromise (zone-evergreen.js:797)

    at zone-evergreen.js:862

    at ZoneDelegate.invokeTask (zone-evergreen.js:391)

    at Object.onInvokeTask (core.js:39680)

    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

    at Zone.runTask (zone-evergreen.js:168)

    at drainMicroTaskQueue (zone-evergreen.js:559)

    at invokeTask (zone-evergreen.js:469)

    at ZoneTask.invoke (zone-evergreen.js:454)

    at timer (zone-evergreen.js:2650)

Please help pointing me the right direction.

Thanks and best regards,

Sathya

[Thavasianand Sankaranarayanan]

Hi Sathyanarayanan, 

  

 

Before proceeding with your issue, we need some more details about your issue. So kindly share the following details which will be helpful for us to validate the reported issue. 

1. Whether you got the error only in Internet Explorer or in other web browsers.
2. The reported error is showned only in “17.4.39” version or in other version.
3. Please confirm whether you got the errors only when Auto generating columns inbuilded.

Regards, 

Thavasianand S. 

[Sathyanarayanan Srinivasan]

Hi Sathyanarayanan, 

  

 

Before proceeding with your issue, we need some more details about your issue. So kindly share the following details which will be helpful for us to validate the reported issue. 

1. Whether you got the error only in Internet Explorer or in other web browsers.
2. The reported error is showned only in “17.4.39” version or in other version.
3. Please confirm whether you got the errors only when Auto generating columns inbuilded.

Regards, 

Thavasianand S. 

Hi Thavasianand,

Thanks for helping out. Here are my inputs....

1. Whether you got the error only in Internet Explorer or in other web browsers.

     I use Chrome and Safari only (my dev platform is all MacOS). Mostly Chrome for the sake of Dev Tools and PWA compatibility checks.

1. The reported error is showned only in “17.4.39” version or in other version.

     I had been using 17.3.28 earlier when the same code was working. After upgrading to v17.4.39, the errors started.

1. Please confirm whether you got the errors only when Auto generating columns inbuilded.

     Yes. The grid has auto-generated columns. The documentation doesnt mention any constraints to define the columns (in contrast it indicates columns will just have column names based on json data array).

Please let me know if you need further inuts to help resolve the issue with local data (json data array).

Thanks and best regards,

Sathya

[Thavasianand Sankaranarayanan]

Hi Sathyanarayanan, 

We have logged a bug report for the reported issue as “Script error throws with first records as null and auto generated columns in Grid”. Thank you for taking  time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming January 8^th, 2020 weekly patch release.  

Until then we appreciate your patience.  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   

   

https://www.syncfusion.com/feedback/10708/script-error-is-thrown-when-rendering-a-grid-with-auto-generated-columns-and-its 

Regards, 

Thavasianand S.