0

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.

aks1993
  • 3
  • 1

1 Answers1

0

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

ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • But the problem is "isReadonly" is not available with me while initializing the grid, only if user changes the dropdown value then isReadonly will become true & then only I want to hide checkboxes otherwise I want to show checkboxes all the time. – aks1993 Mar 04 '21 at 14:49
  • you can call the grid `setOptions` later, via `grid.setOptions({ enableCheckboxSelector: false })` – ghiscoding Mar 04 '21 at 15:11
  • `angularGrid.slickGrid.setOptions({ enableCheckboxSelector: false })` did not work for me. It is not causing any change on the grid – aks1993 Mar 05 '21 at 14:33
  • because the row selector is a column, you have to remove it yourself. I updated the answe – ghiscoding Mar 05 '21 at 16:20