Wijmo grid autoSizeColumns and autoSizeRows are not working for split tables

Wijmo grid autoSizeColumns and autoSizeRows are not working for split tables

Posted by: saisreeja.gadi on 26 November 2023, 9:11 pm EST

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 26 November 2023, 9:11 pm EST - Updated 26 November 2023, 9:17 pm EST

  Hi

  In my application I have wijmo grid having split tables. I am trying to use autoSizeColumns and autoSizeRows, its not working for me.
  
  Inside grid we have split tables, for the first table autoSizeColumns and autoSizeRows are working but for remaining tables we are getting row height issue. I am getting extra space as shown in the attached image

  [code]<wj-flex-grid #flex class=“dc-flex” (initialized)=“flexInit(flex)” [itemFormatter]="itemFormatter [(itemsSource)]=“data” [autoGenerateColumns]=“false” [autoRowHeights]=“true”>

  <wj-flex-grid-column ngFor=“let data of definition” align=“{{data.align}}” [binding]=“data.binding” cssClass=“{{data.cssClass}}” name=“{{data.name}}” [width]="data.width || ''" [minWidth]=“data.minWidth || 120” [wordWrap]=“true”>[/code]

  In component file under flexInit(flex) I used autoSizeColumns and autoSizeRows. In the grid we used wjFlexGridCellTemplate

  

  932×580 12.1 KB

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 28 November 2023, 9:39 pm EST

  Hi,

  As per my understanding, you are using wjFlexGridCellTemplate to provide content in the cell. While implementing this, you are facing an issue where some rows contain extra spaces.

  If this is the issue, then please ensure that the autoSizeRows property of WjFlexGridCellTemplate is set to false. This is required because if autoSizeRows is not explicitly set to false then the cell template will increase grid’s default row height to accommodate cells content. This height will then be used by all the rows. This behavior can be seen from this sample: https://stackblitz.com/edit/angular-ivy-wu7hhz

  To prevent this please set the autoSizeRows property to false. Also, in this case, you can use autoRowHeights to calculate the row heights. Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-wu7hhz

  If using autoRowHeights is causing performance issues (due to large data) then please manually autoSize the only those rows that are present in current viewRange. Please refer to this DEMO sample for reference: https://developer.mescius.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/angular

  In case, if the issue persists or if this is not the issue that you are facing, then please elaborate your use case while providing a working sample (with dummy data) that replicates the issue that you are facing.
  
  This is necessary so that I can assist you as per your use case.

  Thank you for your understanding.

  Regards

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 28 November 2023, 9:44 pm EST

  Hi,

  Sorry, I have shared same sample link twice, please use the below shared sample to observe the difference when autoSizeRows is set to false and autoRowHeights is used.

  Please refer to this sample :https://stackblitz.com/edit/angular-ivy-a2oqdy

  Regards

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 5 December 2023, 12:20 pm EST

  Hi Anirudh,

  We have bulk of grids in a page. It takes time to load all the grids, meanwhile auosizerows is excecuting. So for first table autosize rows is working fine.For remaining grids they are not loaded at the time of auosizerows() execution.

  So I need to refresh grid layout after data loaded. I tried with flex.updatedLayout but it enters into loop. I also tried to refresh using invalidate and invalidateAll.

  Is there any event that executes only once after all the grids data got loaded?

  Thanks & Regards

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 6 December 2023, 2:10 pm EST

  Hi,

  As per my understanding, due to some performance reasons you are not using autoRowHeights property to autoSize the rows and is manually autoSizing the rows. For this please use the loadedRows event to autoSize the rows. Also, check the length of the rows collection before autoSizing to endure that the rows are formed in the FlexGrid (data is loaded in the FlexGrid). To ensure that the autoSizing operation is performed only once, you may either remove the handler form the loadedRows event or use a flag that will be set once the functionality in that handler is executed.

  Please note that loadedRows event will also be raised when column is sorted by clicking on column header or when the data is filtered using the FlexGridFilter.

  Please refer to this API link for more information on loadedRows event: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.flexgrid.html#loadedrows

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-hsxthp

  Regards