Angular Slickgrid | How to Enable/Disable checkbox dynamically (Not show/hide checkbox)

Question

export class Example1 implements OnInit {
  prepareGrid() {
    this.gridOptions = {
      enableRowSelection: true,
      enableCheckboxSelector: true,
      checkboxSelector: {
        // you can override the logic for showing (or not) the expand icon
        // for example, display the expand icon only on every 2nd row
        selectableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1)
      },
      multiSelect: false,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: true,
      },
    };
  }
}

We can use enableCheckboxSelector to show/hide checkbox. But how to enable/disable checkbox based on some condition dynamically?

Answer 1

The question is already answered in the Wiki documentations, you can use selectableOverride , refer to Row Selection - Wiki , but it seems that you already have that code, or maybe you didn't understand what that was for?

If you want to change the selected row(s) at any point in time, then simply use the built-in SlickGrid method setSelectedRows(rowIndexes) which requires an array of row indexes, passing an empty array will clear all selections.

<angular-slickgrid 
  gridId="grid4" 
  [columnDefinitions]="columnDefinitions" 
  [gridOptions]="gridOptions"
  [dataset]="dataset" 
  (onAngularGridCreated)="angularGridReady($event)"> <!-- <<== you need this line !-->
</angular-slickgrid>

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

changeRowSelection() {
  angularGrid.slickGrid.setSelectedRows(rowIndexes);
}