Column header in the angular-slickgrid gets misaligned while enabling the freeze column

Question

Problem statement:-
The column header in the angular-slick grid gets misaligned while enabling the frozen column** **

Screenshot:-
The column header in the angular-slick grid gets misaligned while enabling the frozen column

Environment:-

Software	Version
Angular	15.2.9
Angular-Slickgrid	4.3.1
Operating System	Windows 10
Node	18.17.0
NPM	9.6.7

**Steps to reproduce:- **
1. Scroll horizontally through the angular-slick grid
2. Choose a column and enable the frozen column.

You can now see the column header gets misaligned.

Here is my HTML code:-

 <angular-slickgrid gridId="grid20"
                     gridWidth="875"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onAngularGridCreated)="angularGridReady($event.detail)">
  </angular-slickgrid>

Here is the ts code:-

setFrozenColumns(frozenCols: number) {
    this.gridObj.setOptions({ frozenColumn: frozenCols });
    this.gridOptions = this.gridObj.getOptions();
  }

What I Tried:- I tried freezing columns after scrolling the list. After that, the column headers are misaligned in the angular slick grid. Due to this behavior, unable to identify the exact column header for each column in the Slickgrid.

What I am expecting:- The column headers should not get misaligned even after scrolling through the list and enabling the frozen column for the column.

Answer 1

Please note that I'm the author of Angular-Slickgrid and Slickgrid-Universal

I can replicate the issue and will provide a fix in the libs (similar to what is shown below) but please note that I will only apply a fix for latest major version which at the moment is 6.x (basically I don't support more than one major version at a time). However you can add a temp fix yourself which I just found to be working, you basically have to scroll your grid viewport(s) completely to the left before you set the frozen column. Below is the temp fix

setFrozenColumns(frozenCols: number) {
  // loop through all viewports (top/bottom) and set their X scroll position to 0
  const gridViewports = this.gridObj.getViewports();
  gridViewports.forEach(vp => {
    vp.scrollLeft = 0; // scroll viewport to left
    vp.dispatchEvent(new CustomEvent('scroll')); // trigger scroll to realign col headers
  });

  // at this point you're back to the left and so you can call the freeze
  this.gridObj.setOptions({ frozenColumn: frozenCols });
  this.gridOptions = this.gridObj.getOptions();
}

Also note that SlickGrid does not support freezing columns wider than the available browser width, so you'll need to make sure that the columns you're about to freeze are not wider than the grid canvas.

EDIT

This was fixed in Angular-Slickgrid v6.4.0