Use Virtualizqtion with custom component in angular

Use Virtualizqtion with custom component in angular

Posted by: lalit.kakkar2407 on 28 April 2025, 9:27 am EST

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 April 2025, 9:27 am EST

  Hi Team,

  I am using wijmogrid in angular, and in one coulun i am using custom component which is actually a seprate angular component and its a dropdown which calls api whenever its got initialize,

  When i am adding 100 rows as an example in grid, by using virtualization, only three rows are showing in dom which is fine and when i scroll other three shows in dom, but when i add rows, my custom component is calling 100 times irrespective of only 3 rows showing in grid.

  I want whenever i scroll only then my custom component get initialized and only then it call api from that component instead of calling my custom component in one go 100 times.

  Pls suggest
  
  Thanks in advance.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2025, 1:37 am EST

  Hi Lalit,
  
  This issue can happen if you have set the ‘autoRowHeights’ property of the grid to true, due to which the grid renders all the grid rows once to calculate their heights. To avoid this issue, you can dynamically auto-size the grid rows when they are loaded, by referring to the following demo sample - https://developer.mescius.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/angular
  
  In case, you haven’t set the ‘autoRowHeights’ property and are still facing this issue, please share a small sample in which the issue can be replicated so that we can investigate it on our end. You can also modify the following sample to replicate your issue and share it with us - https://stackblitz.com/edit/angular-ivy-vnsuhey3?file=src%2Fapp%2Fapp.component.ts
  
  Regards