Checkbox Selector column disappears after changing the column list

[Konctantin]

Describe the bug

When creating a grid with a column list and the enableCheckboxSelector: true setting, the column with the Checkbox selector is displayed, but if you change the column list, it disappears.

Reproduction

Here is the code that displays the problem, after clicking the button Update columns, the list of columns changes, but the Checkbox Selector disappear

import { Component, signal } from '@angular/core';
import { GridOption, AngularSlickgridComponent } from 'angular-slickgrid';

@Component({
  selector: 'app-test-grid',
  imports: [AngularSlickgridComponent],
  template: `
    <div class="container-sm">
      <button class="btn btn-secondary mb-2" (click)="updateColumns()">Update columns</button>
      <angular-slickgrid gridId="g122" [options]="options" [columns]="columns()" [dataset]="rows()" />
    </div>
  `,
})
export class TestGridPageComponent {
  protected readonly options: GridOption = {
    gridWidth: '100%',
    enableCheckboxSelector: true,
  };

  protected readonly columns = signal([
    { id: 'id', name: 'id', field: 'id' },
    { id: 'name', name: 'name', field: 'name' },
    { id: 'nameShort', name: 'short', field: 'nameShort' },
  ]);

  protected readonly rows = signal([
    {id: 1, name: 'One dog', nameShort: 'one'},
    {id: 2, name: 'Two dogs', nameShort: 'two'}
    ]);

  protected updateColumns() {
    this.columns.update(() => ([
      { id: 'id', name: 'id', field: 'id' },
      { id: 'name', name: 'name', field: 'name' },
    ]));
  }
}

Which Framework are you using?

Angular

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | Angular 19-22 |
| Slickgrid-Universal | 10.7.1 |
| TypeScript          | 6.0.3 |
| Browser(s)          | Chrome: 149.0.7827.54 |
| System OS           | OS: Windows 10 10.0.19045 |

Validations

• Follow our Code of Conduct
• Read the Wikis.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[ghiscoding]

it always been like this, it was always a side effect and a known limitation as describe in the docs

https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/row-selection#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that

and also commented in a few of the example, for this example this one below

slickgrid-universal/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts

Lines 658 to 665 in 42d5bdf

	// NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
	// you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
	// for example if you use the Checkbox Selector (row selection), you MUST use the code below
	/*
	const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
	allColumns.push(newCol);
	this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
	*/

.... but I'm investigating to see if I could change this and make it transparent to the end user. But for now, you will to follow the code above from the docs to make it work

protected updateColumns() {
    this.columns.update(() => ([
       ...this.angularGrid.gridService.getAllColumnDefinitions(),
      { id: 'id', name: 'id', field: 'id' },
      { id: 'name', name: 'name', field: 'name' },
    ]));
  }

but in your use case, I guess you'll want to remove a column from getAllColumnDefinitions() but anyway, I think you understand the principle...

[Konctantin]

Thank you so much, and I apologize for not reading the documentation carefully.
It would be wonderful if it were possible to change columns without worrying about the "service columns".

My project uses a grid wrapper, and I've added "utility column" in effect.

@Component({
  selector: 'app-grid',
  template: ``,
})
export class AppGridComponent implements AfterViewInit, OnDestroy {
  ...
    
  constructor() {
    ...
    effect(() => {
      const columns = this.columns();
      if (this.componentRef?.instance) {
        const col = this.componentRef.instance.gridService.getAllColumnDefinitions()
          // todo: add more service identifiers (use filter instead find)
          .find(c => c.id === '_checkbox_selector');

        if (col) {
          columns.unshift(col);
        }
        this.componentRef.instance.columns = columns;
      }
    });
    ...
  }

  ngAfterViewInit(): void {
    const options = this.options();
    const columns = this.columns();
    const dataset = this.dataset();
    
    this.componentRef = createComponent(AngularSlickgridComponent<any>, {
      hostElement: this.elementRef.nativeElement,
      environmentInjector: this.applicationRef.injector,
      elementInjector: this.gridInjector,
      bindings: [
        inputBinding('gridId', () => this.id() + '-internal'),
        inputBinding('options', () => options),
        inputBinding('columns', () => columns),
        inputBinding('dataset', () => dataset),
      ],
    });

    this.applicationRef.attachView(this.componentRef.hostView);
    this.componentRef.changeDetectorRef.detectChanges();

    this.registerEvents();
  }
  
  ...
}

[github-actions]

✅ This issue has been resolved and included in version 10.8.0 📦
🔗 The release notes are available at: GitHub Release 🚀