After Scroll data not show in grid

[Deepak Jain]

Hello Team, 

We have use row template and virtualization in Grid when we scroll quickly all rows blank template are not rendering.

Attachment: a92c7d32f7234461855a590f77a3d6258_53629003.zip

[Praveenkumar Gajendiran]

Hi Deepak,

Thanks for contacting Snycfusion support.

We checked your query and provided screenshot. Based on that we have prepared a Grid row template with virtualization sample , but unfortunately we are unable to reproduce your reported issue at our end and everything works fine. For your convenience we have prepared a video. Please find the link below  

Video Link: https://www.syncfusion.com/downloads/support/forum/159371/ze/WINDOW~41503477033.zip
Sample Link:  https://stackblitz.com/edit/angular-g5uenk?file=app.component.ts

Note: “We suspect that the reported problem occurs due to not defined the pageSize property to the Grid”

Refer the below document for virtualization of Grid and limitations of virtualization.

Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/edit/#dialog 

If you still face the issue or this is not your requirement scenario, please get back to us with the below details that will be helpful for us to proceed further.  

1)                 Syncfusion package version.  

2)                 Complete Grid rendering code. 

3)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

4)                 If possible, explain your problem scenario with video demonstration. 

Regards,
Praveenkumar G 

[Deepak Jain]

Thanks for your reply. We will let you know if still problem exists after pageSize implementation. 

[Praveenkumar Gajendiran]

Hi Deepak,  

You are welcome. We will wait to hear from you. 

Regards, 

Praveenkumar G. 

[Deepak Jain]

Dear Team,

We set the pageSize property to 50 but the problem is still the same. Virtualization is also disabled.

I have attached the video for your consideration.

Please can you check why is it happening.

Attachment: videofd3d29e34fd44714b16b985b65de98e2video_e8bc6cbd.zip

[Praveenkumar Gajendiran]

Hi Deepak,

Sorry for the delay getting back to you

We checked your query and provided video. We would like to inform you that the Grid will take some times to render the row while using rowTemplate feature. Because, you can render the custom element or  custom component through rowTemplate based on customization in your application.

For this case we suggest you to enable waiting popup(i.e., spinner) while scrolling the Grid content. In the below code example, we have show the spinner by using showSpinner method of Grid in the document scroll event and hide the spinner by using hideSpinner method of Grid.

Code Example: 

created() { // created event  

    var gridComponent = this.grid; 

    var gridContent = document.getElementsByClassName("e-content")[0]; 

    gridContent.addEventListener("scroll", scrolling); 

 

    function scrolling() { 

      gridComponent.showSpinner(); 

      setTimeout( 

        function() { 

          gridComponent.hideSpinner(); 

        }.bind(this), 

        50 

      );
    } 

  } 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/angular-wc8fke-5sbqwu?file=app.component.ts 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G