dataStateChange event is raised twice in Grid virtualization

[Pranav Patel]

Hi,

I am using following code for RemoteData binding and virtualization. I have set pagesize to 30. On initialization of page, it fetch 30 records from server and bind correctly. But when I start scroll, dataStateChange event is raised twice. so my API is called two times. Why this event is raised twice?

Also when I scroll, I faced page rendering issue sometimes.

app.component.html:
-----------------------------------------
<ejs-grid #grid [dataSource]='indexes | async' [enableVirtualization]='true' (dataStateChange)='dataStateChange($event)'
    [pageSettings]='pageOptions' height='500'>
</ejs-grid>


app.component.ts:

ngOnInit(): void {
    this.pageOptions = { pageSize: 30 };
    const state = { skip: 0, take: 30 };
    this.indexService.execute(state);
  }

  dataStateChange(state: DataStateChangeEventArgs): void {
    console.log(state);
    this.indexService.execute(state);
  }
 

 Regards,

[Manivel Sellamuthu]

Hi Pranav, 

Greetings from Syncfusion support. 

We have tried to replicate the reported issue in our end by applying the same settings. RemoteData binding and virtualization is working fine at our end. Also we have alerted ever time a dataStateChange event triggered. It is triggered once for each scroll. Please refer the below sample for your reference. 

Sample: https://stackblitz.com/edit/angular-ntgj93-hprv5f?file=async-pipe.html 

If you still faced the issue, Could you please share the below details, which will be helpful for us to validate further about issue. 

1. Share the complete Grid code
2. Please try to replicate the issue in the given sample or share the steps to replicate the reported issue
3. If possible, please share the issue reproducible sample.

Regards, 

Manivel 

[Pranav Patel]

Hi Manivel,

I have tried your sample and facing same issue. I am attaching screenshot from your sample. check two points.

1. Rendering issue

2. see in console. Orders api call twice.

[Thiyagu Subramani]

Hi Pranav, 

Thanks for your update. 

Still, we didn’t get your exact issue reproducing scenario at our end and we regret that. So, before proceed further please share below details which helps us to provide appropriate solution as soon as possible. 

1. Share your issue reproducing sample. 

2. Video demonstration of your issue. 

3. Syncfusion package version.  

4. Share your complete grid rendering code. 

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

Regards, 

Thiyagu S