Dynamically adding column(s) is causing row move feature stop

[SMarongui]

Describe the bug

I'm trying to use both

• row mode feature
• Add dinamically columns

And when I add a column, the column with burger buttons to enable rowmove dissapears

Reproduction

I have reproduced the case in
Example 17: Row Move & Checkbox Selector
Which has row move already activated

I have change the code in

  disableFilters() {
    // this.angularGrid.filterService.disableFilterFunctionality(true);
    if (this.columnDefinitions[0].id !== 'change-symbol') {
      const newCols = [
        {
          id: 'change-symbol',
          field: 'id',
          excludeFromColumnPicker: true,
          excludeFromGridMenu: true,
          excludeFromHeaderMenu: true,
          formatter: Formatters .editIcon,
          minWidth: 30,
          maxWidth: 30,
          // use onCellClick OR grid.onClick.subscribe which you can see down below
          onCellClick: (clickEvent: Event, cellClickArgs: OnEventArgs) => {
            // this.alertWarning = `Editing: ${args.dataContext.title}`;
            this.angularGrid.gridService.highlightRow(cellClickArgs.row, 1500);
            // this.angularGrid.gridService.setSelectedRow(args.row);
          }
        }, {
          id: 'delete-symbol',
          field: 'id',
          excludeFromColumnPicker: true,
          excludeFromGridMenu: true,
          excludeFromHeaderMenu: true,
          formatter: Formatters.deleteIcon,
          minWidth: 30,
          maxWidth: 30,
          // use onCellClick OR grid.onClick.subscribe which you can see down below
          /*
          onCellClick: (e: Event, args: OnEventArgs) => {
            console.log(args);
            this.alertWarning = `Deleting: ${args.dataContext.title}`;
          }
          */
        }
      ];

      this.columnDefinitions.splice(0, 0, newCols[0], newCols[1]);
      this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
    }
  }

To add the columns

Environment Info

Angular: 14.1.3
Angular-slickgrid: 4.3.0
Typescript: 4.7.4
Browser: Chrome
System: Microsoft Windows 10

Validations

• Follow our Code of Conduct
• Read the HOWTO - Step by Step.
• 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]

The reason is because the Row Move is a special columns that is being pushed to the column definitions array and is not directly accessible from your columnDefinitions variable because Angular-Slickgrid is keeping a separate copy of all the columns (one of the reason it keeps a separate copy is because the lib needs to keep a reference of all the columns visible & non-visible so that the Grid Menu and Column Picker could be reset). I might change that in the future, but at this point, the answer is shown below

Anyway long story short, you need to access that Angular-Slickgrid copy of all column definitions and use that one instead of your columnDefinitions because when you do so, you're overriding the Angular-Slickgrid internal all columns reference and it's lost forever. So just use this code instead and it will work

-      this.columnDefinitions.splice(0, 0, newCols[0], newCols[1]);
-      this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
- 
+     const cols = this.angularGrid.gridService.getAllColumnDefinitions();
+     cols.splice(0, 0, newCols[0], newCols[1]);
+     this.columnDefinitions = cols.slice();

+     // or use SlickGrid setColumns directly
+     // this.angularGrid.slickGrid.setColumns(cols);

Also note that there are a couple more special columns, basically any of the columns that are added dynamically by the lib,

• Row Move
• Row Detail
• Row Selection (checkbox)

I added a troubleshooting section in the Row Selection & Row Detail Wiki Adding a Column dynamically is removing the Row Selection, why is that?

[ghiscoding]

I'm reopening this issue, I currently have a POC that does keep the user's column definitions in sync as well, however there will be a slight change on the user's side for this to work, the change is to use [()] to make the column definitions a real 2-way binding and then Angular-Slickgrid will then take care of keep in the columns in sync in the future

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

[ghiscoding]

closed by PR #1024 and released as the new version v5.1.0