Angular grid with observable data source selection issue

Question

I submitted this issue in the Feedback section but thought this might be a more appropriate place. Original post: https://www.syncfusion.com/feedback/24041/angular-grid-with-observable-data-source-selection-issue .

I am having an issue when using an observable data source with the angular grid component. The goal is to display row details below after selection. It works fine if I do not specify columns using e-columns. If I specify columns to display I can not get the detail section to display using *ngif. It shows the value is updated in the console but the div does not display. Everything works as expected using a local JSON data source but fails using the observable source.

I am not sure if this is a problem with my code or a bug. I have attached a screen capture of the issue and the code in question. Please let me know if you need anything else or have any suggestions.

Thank you,

Scott Eaton

Attachment: angularGridObservableIssue_15dc6e5d.zip

Balaji Sekar · Answer

Hi Scott, 
 
Greetings from Syncfusion and sorry for the delay in updating the response. 
 
We checked your reported problem but unfortunately were unable to reproduce it from our end as the Grid selected item data was properly displayed on using observable binding with columns. Please check below sample for your reference, 
 
Sample: https://stackblitz.com/edit/angular-yknppm-oqve16?file=app.component.html 
 
From the shared video demo, we could see that the rowSelected event is getting triggered multiple times(console log) for single selection. But for this case the event will be triggered only once which was working fine on checking from our end. So we suspect you might be facing the problem due to duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the event to be triggered multiple times. So please follow the steps provided below to overcome this,   
   
1.       Delete package.lock.json file from your application.  
2.       Remove the @syncfusion  package folder from the node_modules.  
3.       Use “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
4.       Then install the new packages.  
 
Once installed the new packages please check if problem is resolved. If problem still persists then please share the following information to validate further on this, 
 

Based on the provided condition the selected item data div will be displayed only if the variable is not null. And in the shared video we could see that the selected data is properly printed in console but not displayed in the div so we suspect that this selected item data is being set as ‘null’ in the sample level which might be causing the problem. So please ensure from your end if this data is set as ‘null’ in your application.
Please let us know if you are able to reproduce your problem case in the above shared sample. Or else if possible share us a simple sample to replicate the problem.
 
Regards, 
Balaji Sekar

Scott Eaton · Answer

I updated the package.json and installed new Syncfusion packages but I still had the same issue. I was not able to reproduce the issue in your sample. I suspect it has something to do with my data service, Apollo client, or GraphQL process. I was able to refactor the code to provide the data manually and ditch the observable and data service. I used the same

GraphQL query and everything now works as expected. I ended up with something like this:

  ngOnInit() {
    this.selectionOptions = { enableToggle: false };
    const state = { skip: 0, take: 50 };
    this.pageOptions = { pageSize: 50 };
    this.fsDataService.userOrg.subscribe(userOrg => {
      if (userOrg) {
        this.userOrg = userOrg;
        this.getGridData(state);
      }
    });
  }

  public onRowSelected(args: RowSelectEventArgs): void {
    this.selectedData =  Object.assign({}, args.data);
  }

  public dataStateChange(state: DataStateChangeEventArgs): void {
    this.getGridData(state);
  }

  public getGridData(state: DataStateChangeEventArgs): void {
    this.prospectGridGQL.watch({offset: state.skip, pageSize: state.take})
    .valueChanges
    .subscribe(({ data, loading }) => {
      if (data.pBases) {
        const returnData = {
          result: data.pBases.nodes,
          count: data.pBases.totalCount
        };
        this.gridData = returnData;
        this.selectedData = null; 
      }
    });
  }

Balaji Sekar · Answer

Hi Scott, 
 
We checked the reported problem with provided the details but we are unable to reproduced the mentioned problem so please share video demonstration of the problem to us that will help to validate further. 
 
Regards, 
Balaji Sekar