We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Datasource when using local data as Observable

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
loading
Tags: Grid
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(stateDataStateChangeEventArgs): void {
    this.fetchCountries(state).subscribe(x => super.next(x as DataStateChangeEventArgs));
  }

  protected fetchCountries(stateDataStateChangeEventArgs): Observable<DataStateChangeEventArgs> {
     // do other things to get the data into sliced[]
    
    let finalResultany;
    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(groupedResultsgrouping); });
        console.log('Scenario: filtered countries (dS:undef, group:y, action:undef) : ' );
        finalResult = { result: groupedResultscount: totalCount } as DataResult;
      } else {
        console.log('Scenario: filtered countries (dS:undef, group:undef, action:na) : ');
        finalResult = { result: slicedcount: 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 [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. 


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
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((dataany=> data)); // works with Angular@8.2.9

// Component (class level attributes)
dsDataStateChangeEventArgs;

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


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. 



Regards, 
Thavasianand S. 


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. 



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

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

  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 [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 8th, 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.   
   

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon