In angular slickgrid, enablecheckboxselector:true is not working when routing from another page or changing the grid data

Question

I have a dropdown, on change of value in the dropdown I am loading the grid with new data & calling setGridOptions() which sets all the grid options again. I have enablecheckboxselector:true but then also checkboxes are not coming. Surprisingly, as soon as I click on any column to sort it, checkboxes are shown. Can anyone please suggest a solution. Thanks!

ghiscoding ghiscoding · Accepted Answer · 2021-03-18T15:12:56

The answer is roughly the same as the other SO Question you asked here. So this seems like a duplicate and the answer was

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.gridObj = angularGrid.slickGrid;
}

changeGridOptions() {
  const isReadyOnly = false; // whatever your code logic is here...
  this.angularGrid.slickGrid.setOptions({ enableCheckboxSelector: isReadyOnly });
  if (isReadOnly) {
    // you also need to remove the column from your column definitions
    // you can do that by using slice which will also trigger a dirty change to refresh the grid
    this.columnDefinitions = this.columnDefinitions.slice(1); // return all columns without first one (without index 0)
  }
}

If that doesn't work, you can try the other solution I answered in a similar question yesterday here, this piece from the answer (this is probably what will work for you if you add/remove the checkbox column dynamically, it's written in the code comment and for a full explanation then read the other SO here)

  dynamicallyAddTitleHeader() {
    //... add your new column

    // 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.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
  }

Basically Angular-Slickgrid keeps an internal reference of the column definitions and their position, if you go directly with grid.setOptions you're kind of bypassing Angular-Slickgrid and it is not aware of a column definitions change, you can force a sync with the 2 proposed piece of code written in this answer. What you have to know and remember is that Angular-Slickgrid is a wrapper on top of SlickGrid, if you talk directly to SlickGrid then in some cases (like this one) then Angular-Slickgrid isn't aware of the change.

There's also an event onSetOptions in SlickGrid that could potentially be used to just re-sync the column definitions but I'm not sure I want to put that directly in the lib, it should be safe to use in your grid but I'm not sure of the consequence directly in the lib (I maybe don't want to reload the columns on every kind of grid option changes), something like this maybe (untested)

<angular-slickgrid 
     gridId="grid"
     [columnDefinitions]="columnDefinitions" 
     [gridOptions]="gridOptions" 
     [dataset]="dataset"
     (onAngularGridCreated)="angularGridReady($event)"
     (sgOnSetOptions)="handleOnSetOptions($event.detail.eventData, $event.detail.args)"
</angular-slickgrid>

handleOnSetOptions(e, args) {
  const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
  
  // (or use slice) reassign to column definitions for Angular to do dirty checking
  this.columnDefinitions = [...allColumns]; 
}

In angular slickgrid, enablecheckboxselector:true is not working when routing from another page or changing the grid data

1 Answers