angularangular-slickgrid

Set enableCheckboxSelector to false based on if condition


I am using angular slickgrid & by default I have enableCheckboxSelector set to true in grid options. But based on value change in dropdown I want to hide checkboxes for all rows so I have written

`if(isReadOnly){
this.gridOptions.enableCheckboxSelector = false;
}
else{
this.gridOptions.enableCheckboxSelector = true;
}`

but it is not working as expected. Can anyone help me fix this. Thanks.


Solution

  • You misunderstand how this works, the enableCheckboxSelector grid option is to show (or not) the row selection column. If you put that option to false, then you get rid of that entire column (which is not at all what you want).

    What you need is selectableOverride and it is shown in this Row Selection - Wiki. The Wikis have plenty of information for you to read.

    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,
          },
    };
    

    If you want to change the grid options after fact, you can do that via the grid (SlickGrid grid object) and the setOptions method (see SlickGrid & DataView Objects)

    NOTE: just changing the enableCheckboxSelector will not remove it from the UI because the row selection is now a column within your column definitions. So if you first displayed and then want to remove it, you'll have to remove it yourself from your columnDefinitions array and if you want to re-add it, then you better keep a copy of that column before you delete it since Angular-Slickgrid won't do it by itself. In other words, Angular-Slickgrid will add the row selector column but it won't remove it, you have to do that part yourself.

    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)
      }
    }
    

    You can see a live example of changing the grid options via setOptions in the Example 3 - Editors, the "Auto Commit Edit" checkbox (and "autoEdit setting" radiobox) is updated via the setOptions