Flexgrids cause scroll done the angular material dialog

Flexgrids cause scroll done the angular material dialog

Posted by: mary431982 on 21 November 2025, 10:17 am EST

• 

  mary431982

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 November 2025, 10:17 am EST

  Hello,

  I show dinamically created grids on angular material dialog,
  
  it used to open without scrolling down the dialog,
  
  but now since we made some change - as we open the dialog it keeps scrolling down as new grids are being created on it, and in the end I see that focused element is wj-no-data-overlay, eve though we set the autoFocus property of dialog to false.

  How do we stop the grid from being focused as we create it in angular material dialog which has the autoFocus property to false?

  Best regards!!

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 November 2025, 5:01 am EST

  Hi,

  We tried to replicate the issue on our end as per your description, but the issue is not replicable on our end after setting the ‘autoFocus’ property of the mat-dialog to false. It might be possible that some other factors in your application might be causing this issue. Could you please share a small sample that replicates the issue, so we can investigate it further and assist you accordingly?
  
  Please refer to the attached sample in which we tried to replicate the issue. You can also modify the attached sample to replicate the issue and share it with us.
  
  In case, if there is something we missed, please let us know.

  Sample: material-dialog-flexgrid.zip

  Regards

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 24 November 2025, 1:53 pm EST

  Ooooh its our fault, or Code focuses SOME grids, because we didn’t like the fact that when our first column is not visible - there isn’t any cell selected, so we wrote this:

  public onCollectionChanged = (e: any, args: any) => {
     if (!this.flexGrid.columns[this.flexGrid.selection.col]?.isVisible) {
          this.flexGrid.select(this.flexGrid.selection.row, this.flexGrid.columns.firstVisibleIndex);
          this.flexGrid.focus();
      }
  }
  

  And now we don’t like that it happens on some grids which are on the dialog which keeps scrolling down because of this this.flexGrid.focus();.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 25 November 2025, 2:08 am EST

  Hi Mary,
  
  Thank you for sharing the additional information. We suggest not to use the ‘focus’ method after updating the grid selection if not necessary, and please make sure the pass the ‘show’ parameter as ‘false’ in the ‘flexgrid.select’ method to make sure the selected cell is not scrolled into view after selection.
  
  If you want the grid to be focused, then you can use the focus method as well, but in some cases, the data timing may create this scrolling issue. You can try wrapping the ‘focus’ method inside the setTimeout function in that case. Please refer to the code snippet below for the same. Please find attached an updated sample for your reference.

  public onCollectionChanged = (s: any, args: any) => {
      if (this.flex && !this.flex.columns[this.flex.selection.col]?.isVisible) {
        this.flex.select(new wjcGrid.CellRange(this.flex.selection.row, this.flex.columns.firstVisibleIndex), false);
        setTimeout(() => {
          this.flex.focus();
        })
      }
    }

  In case, you still face any issues, please let us know.
  
  Regards

  Sample: mat-dialog-flexgrid-updated.zip

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 25 November 2025, 7:31 am EST

    setTimeout(() => {
      this.flex.focus();
    })
  

  It solved our issue.

  Thank You for your quick replies!!

  Best regards!!!
  
  Marija