Certain columns are not getting highlighted.

[Anant1008]

There are some identity grid columns which is not suppose to be shown hence we do not show these columns, on row selection the entire row gets highlighted.
But, when we revert back or show hidden identity columns. The cell of hidden column does not change color as per row selection.

General Topic

Your Environment

Software	Version(s)
Angular	9.1.0
Angular-Slickgrid	2.25
TypeScript	3.8.3
Operating System	x.y
NPM/Node/Yarn	x.y

Context

Expected Behavior

When we add back hidden columns, those added columns should also get highlighted.

Current Behavior

When we hide some columns and select the row and then add those hidden columns, those added columns are not getting highlighted.

[ghiscoding]

You might need to re-render the grid (via invalidate) after selecting a row (via onSelectedRowsChanged) or after showing the column from the column picker and/or the grid menu (via onColumnsChanged). While calling the grid invalidate, it will most probably close any open editors so I guess it would be ok to do that on any of the 2 proposed way of doing it.

<angular-slickgrid 
     gridId="grid2"
     [columnDefinitions]="columnDefinitions" 
     [gridOptions]="gridOptions" 
     [dataset]="dataset"
     (sgOnSelectedRowsChanged)="handleOnSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

handleOnSelectedRowsChanged(e, args) {
   args.grid.invalidate();
}

or ColumnPicker/GridMenu

this.gridOptions = {
   columnPicker: {
     onColumnsChanged: (e: Event, args: any) => args.grid.invalidate()
   },
   gridMenu: {
     onColumnsChanged: (e: Event, args: any) => args.grid.invalidate()
   },
};

[ghiscoding]

Actually I just tried it and that doesn't work because SlickGrid is only setting the selected CSS class only on the visible columns in the handleSelectedRangesChanged event handler on this line

What does work however is this

this.gridOptions = {
   columnPicker: {
     onColumnsChanged: (e: Event, args: any) => args.grid.setSelectedRows(args.grid.getSelectedRows())
   },
   gridMenu: {
     onColumnsChanged: (e: Event, args: any) => args.grid.setSelectedRows(args.grid.getSelectedRows())
   },
};

it's basically recalling the row selection (read it and rewrite it back) will call that handleSelectedRangesChanged again and will add the selected CSS on all cells including the column you just showed back. It's a bit of a hack but that works,
I was afraid that it would potentially call multiple Grid State changes but it doesn't, so I can add it into the code (I wouldn't add it if it was doing multiple Grid State changes)

[ghiscoding]

This is now fixed and released under the new version 2.28.2

Cheers ⭐

[Anant1008]

Thank you so much