Row height flickering after upgrading to wijmo version 5.20242.21

Row height flickering after upgrading to wijmo version 5.20242.21

Posted by: nilesh_nichal on 2 January 2025, 8:56 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 January 2025, 8:56 am EST - Updated 2 January 2025, 9:30 am EST

  We are using the wijmo flexgrid to display data entries. After upgrading to version 5.20242.21, we noticed that while scrolling the grid content vertically or horizontally, the row height changes, causing a flickering effect.
  
  We need to fix the row height at 32px. We have used grid.rows.defaultSize = 32; in .ts file. Also we’ve tried applying CSS, but it’s not having any effect.
  
  Please provide guidance on how to resolve this issue and maintain a consistent row height of 32px. Let me know if you need more details.

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 3 January 2025, 1:22 am EST

  Hi Nilesh,

  Please try to set the grid.autoRowHeights as ‘false’. The autoRowHeights property overrides the defaultSize behavior. For reference, please check out the following sample application:
  
  https://stackblitz.com/edit/asd32sa-kj6ugcxp?file=src%2Fapp%2Fapp.component.ts

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 3 January 2025, 5:16 am EST - Updated 3 January 2025, 5:17 am EST

  Hi Akshay,

  We have tried the above steps, but still getting same issue. Below is the code we are using

   <wj-flex-grid #grid
                      (initialized)="initGrid(grid)"
                      [autoGenerateColumns]="false"
                      [itemsSource]="state.gridData$ | async"
                      [headersVisibility]="'Column'"
                      [frozenRows]="1"
                      [frozenColumns]="2"
                      [autoRowHeights]="false"
                      (mouseover)="onMouseover(grid, $event)">

    public initGrid(grid: wjcGrid.FlexGrid): void {
  
      (grid.collectionView as wjcCore.CollectionView).newItemCreator =
        this.newItem.bind(this);
  
      
  
      
      grid.formatItem.addHandler(this.formatter.bind(this));
  
  
      grid.mergeManager = new FooterMergeManager(grid);
  
  
      grid.rows.defaultSize = 32;
      grid.columnHeaders.rows.defaultSize = 32;
  
    
    }

  Please find the video recording for same.

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 6 January 2025, 12:54 am EST

  Please find the screen recording for same for above query.
  
  Video Project 6.zip

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 6 January 2025, 2:01 am EST

  Hi Nilesh,

  Thanks for sharing the screen recording.

  As I could see you are adding a handler to the FormatItem event. It is possible that the cell height is changing based on some code in the FormatItem event or CellTemplate(if any). It would be difficult to point out the cause of the issue without being able to reproduce it at our end first, which is why I would request you to modify the following sample application such that it replicates your issue and then send it back to us so we can reproduce this issue at our end and get back to you accordingly.

  Please also share a detailed steps to reproduce as well.

  Sample: https://stackblitz.com/edit/asd32sa-5etr6awp?file=src%2Fapp%2Fapp.component.ts