Grid Datasource when using local data as Observable

Sathyanarayanan Srinivasan

Asked On October 3, 2019 03:03 AM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On October 3, 2019 01:22 PM UTC

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.

Share screen shot or video demonstration of the issue.
Share the stack trace details if you face any script error in console window.
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
Share complete Grid code example.

Regards,

Thavasianand S.

Reply | Reply with quote

Sathyanarayanan Srinivasan

Replied On October 3, 2019 11:55 PM UTC

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);
    

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On October 4, 2019 09:59 AM UTC

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.

Reply | Reply with quote

Sathyanarayanan Srinivasan

Replied On December 19, 2019 08:48 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On December 20, 2019 08:40 AM UTC

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.

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

Regards,

Thavasianand S.

Reply | Reply with quote

Sathyanarayanan Srinivasan

Replied On December 20, 2019 08:56 PM UTC

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.

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

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

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....

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.

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.

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On December 23, 2019 11:19 AM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148040	Oct 3,2019 03:03 AM UTC	Dec 23,2019 11:19 AM UTC	Angular - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US