Grouping with remote data

[Benjamin HERON]

Hi,

I've an issue when I want to load remote data, applying a default grouping.

 If I disallow grouping, datas are correctly loaded.

But if I allow grouping, no datas are loaded.

Here is my code :

Component :

Service :

Dependencies :

I tried to allow paging in the same time, and no datas are loaded in the first page. But when I move to the second page, datas are correctly loaded. I don't understand.

 

Could you help me please ?

Regards,

Ben

[Rajapandi Ravi]

Hi Benjamin, 

Thanks for contacting Syncfusion forum. 

Based on your reported issue may occurs in while taking data from server side make more time and that time applied groupsettings are not reflected to required data server. So we suggest to use below code in dataBound event to achieve your requirement. 

constructor(private service: OrdersService) { 

    this.data = service; 

  } 

  public dataStateChange(state: DataStateChangeEventArgs): void { 

    this.service.execute(state); 

  } 

  public ngOnInit(): void { 

. . .  . 

    this.groupOptions = {}; 

  } 

  public dataBound(args: any): void { 

    this.grid.showSpinner(); 

    if (this.grid.currentViewData.length > 0) { 

      this.grid.hideSpinner(); 

      if (this.flag) { 

        this.groupOptions = { showDropArea: false, columns: ['OrderID'] } 

      } 

      this.flag = false; 

    } 

  } 

<ejs-grid #grid id='Grid' [dataSource]='data | async' allowPaging= 'true' [groupSettings]='groupOptions' (dataBound)='dataBound($event). . . . (dataStateChange)= 'dataStateChange($event)'> 

. . . .  

</ejs-grid> 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.

[Benjamin HERON]

Hi,

Thanks. My issue is resolved.

Regards

[Ajith Govarthan]

Hi Benjamin, 

We are happy to hear that issue is resolved. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G 

[Nahom]

It's not working for me.

[Rajapandi Ravi]

Nahom,

We have prepared a sample for the “Remote data with Grouping” with using the above same codes. Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-3bfjjm-snbwo7?file=app.component.ts,app.component.html,order.service.ts

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our above attached sample.

Regards,

Rajapandi R