Adding/removing columns programmatically removes the row checkbox selector

[sandorhp]

I'm submitting a Bug report

Your Environment

Software	Version(s)
Angular	6.1.6
Angular-Slickgrid	2.17.5
TypeScript	3.1.1

Describe the Bug

Adding or Removing Columns programmatically, after the Grid has been loaded with grid Option enableCheckboxSelector: true, removes the checkbox selector column from the grid.

On the other hand, setting the grid option enableCheckboxSelector: true programmatically will load the initial columns the grid has been loaded with (it will discard columns added programmatically)

Steps to Reproduce

Define a grid with 2 columns and enableCheckboxSelector: true
This will display a grid with the row selector checkbox and 2 columns
Programmatically remove one of the columns
This will remove the column AND the row selector (ISSUE #1)

From here, set the grid option enableCheckboxSelector: true programmatically.
This will show the row checkbox selector BUT will display the 2 original columns (ISSUE #2)

Expected Behavior

Adding or removing Columns programmatically should not affect or change the grid options definition or behavior.

Setting enableCheckboxSelector: true programmatically should not reset the columns defined to its original state. Current columns should remain

Current Behavior

Adding or removing Columns programmatically make the row checkboxes disappear.

Setting enableCheckboxSelector: true programmatically revert any changes made to the columns programmatiacally.

Possible Solution

Code Sample

https://angular-slickgrid-changing-columns-issue.stackblitz.io

[ghiscoding]

I never add column dynamically, there's too much in play and too many problems related to this. I'm open to any PR fixing the issue, I'm guessing (without looking at any code) that the checkbox selector plugin must be reloaded or re-initialized after adding a column.

[ghiscoding]

@sandorhp
After thinking about it, this should be resolved in your code and not in the lib. The problem is simple, using an extension like the Row Selector, which you are, will add an extra column at the beginning of the grid and that is done internally by the grid. Your real issue is that you're dynamically adding a column to your local column definitions while you should instead use the same column definitions as the grid does.

So you're probably doing something like the following

// create columns
this.columnDefinitions = [ /**... */ ];

// dynamically add columns
this.columnDefnitions.push({ id: 'newColumn' }); 
this.columnDefinitions = [...this.columnDefinitions];

But you should instead use getColumns from the grid object (you can get the grid object from the onAngularGridCreated event), this will return you the entire set of columns (including the checkbox selector column, which is the 1st column). From this full set, you can dynamically add your columns.

// create columns
this.columnDefinitions = [ /**... */ ];

// dynamically add columns
// but get all columns via `getColumns()` which includes the checkbox selector column
const allColumns = this.gridObj.getColumns(); 

// then add your column to this full set of columns
allColumns.push({ id: 'newColumn' }); 
this.columnDefinitions = [...allColumns];

That should work and is preferable compare to trying to implement all sort of complex logic to cover all scenario internally. Please confirm that this works and I'll add a comment in the Example code where dynamic columns are demoed

[sandorhp]

@ghiscoding

I've tested what you've recommended and it worked.
It seems like adding and removing columns the way you suggested doesn't make the checkbox selector disappear, which is what I'm looking for.
I've also updated my code sample to include your suggestion.
Thanks for your quick response!

[ghiscoding]

@sandorhp
Glad that works, it's much easier this way instead of dealing with it internally. I added comments in the Examples to explain this.

Also, if you like the lib, please consider upvote if you haven't yet ⭐️ that is all I'm asking 😉
Cheers

[sandorhp]

@ghiscoding
I think I've found an "issue" using your proposed solution.
Once the columns are added, they appear on the grid Menu as expected. So far so good.
The issue is when these columns are removed because the grid Menu still show them, and you could even select them and put them back again.
To reproduce it you can go to my stackblitz and
Add 3 columns by clicking 3 times of times on "1.1 Add Last Column (as recommended)".
Check the Grid Menu. Columns are there.
Delete the 3 columns by clicking 3 times on "1.2 Delete Column (as recommended)"
Check the Grid Menu. The columns still appear there but unchecked.

Is there a way to also update that Gird Menu list programmatically and remove deleted columns from the list?
Thx!

[ghiscoding]

if you're deleting a column, you also need to let Angular know of the updated column definitions, so you have to do something like below, is that what you're doing?

allColumns.pop(); // remove last column
this.columnDefinitions = [...allColumns];

How do I see the code in your stackblitz? usually it's showing the editor but your link shows the full screen version.

[sandorhp]

yes that's what Im doing
Try this other link and you should be able to see the code and fork it so you can do changes.

https://stackblitz.com/edit/angular-slickgrid-changing-columns-issue?file=src%2Fapp%2Fapp.component.ts

[ghiscoding]

Thanks though I wasn't able to run the code, tried locally and I think it's because the spread operator will... spread (as the name suggest lol) but spread also mean it won't remove it will only spread.

You'll have to do it in 1 extra line

allColumns.pop();
this.columnDefinitions = allColumns; // this will overwrite the entire array
this.columnDefinitions = [...this.columnDefinitions]; // then spread for dirty checking

or maybe this way would work too

allColumns.pop();
this.columnDefinitions = allColumns.slice(); // this will overwrite and force dirty checking I think

BTW, the only reason that we are using the spread operator (or slice) is to force Angular for a dirty checking and just assigning is not enough for Angular to know there was a change. I think it's because of mutation or something, can't fully remember.

[ghiscoding]

Actually it might not always work because of this line, I seem to only assign when the column definitions grows but not decrease. I don't remember why exactly, will have to check next week.