禁用 Ag-grid 中的复选框选择

Question

is it possible to disable checkbox selection by preserving some selected rows rendered with some constraints? I dont want to allow users to deselect rows which were selected while rendering.

I found this.gridOptions.suppressCellSelection = true; but this just hides the checkbox whereas i need to show the checkbox in disable mode.

Thanks.

Answer 1

I resolved it by adding rowClassRules in GridOptions

            rowClassRules: {
                'ag-row-selected' : function(params) {
                    return params.node.selected === true;
                },
            },

This will add css as below to disable checkbox click

.ag-row-selected{
        .ag-cell .ag-cell-wrapper .ag-selection-checkbox .ag-icon-checkbox-checked {
            pointer-events: none;
        }
    }

RowClass rules are applied when grid is updated/refreshed or nodes are updated. I did it by updating specific nodes

           node.setSelected(true);
           // this is to trigger rowClass for selected/non-selected rows
           // to disable checkbox selection
           node.setData(node.data);

Answer 2

This worked for me

 cellStyle: params => {
          return params.data.myStatus ? {'pointer-events': 'none', opacity: '0.4' }
            : '';
        }

Answer 3

One way is to add a cellRenderer function to the column for which the checkbox is need to be implemented. You can enable or disable the checkbox by returning true or false from the cellRenderer function.

Answer 4

If you're using the builtin agGroupCellRenderer to render checkbox for multiple selection, you can turn off the node's selectable flag when deciding whether to render checkbox or not.

cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
    checkbox: function(params) {
        const node = params.node;
        const isGroupRow = node.level === 0; //only show the checkbox on group row.

        if(isGroupRow) {
            params.node.selectable = //your condition whether the rendered checkbox is selectable or not
        }

        return isGroupRow;
    }
}

Answer 5

Pure CSS workaround:

.ag-selection-checkbox.ag-hidden {
  display: inherit !important;
  opacity: 0.6;
  cursor: not-allowed;
}

This will overwrite the display:none configuration in ag-hidden for the checkbox wrapper.

Answer 6

{ headerName: 'IsActive', field: '', editable: false, cellRenderer: params => { return `<input type='checkbox' disabled=true  ${params.data.IsActive ? 'checked' : ''} />`; } }

Answer 7

If you want to disable the header of the ag-grid checkbox when filter data is found none then this might be helpful

   headerCheckboxSelectionFilteredOnly:true 

Answer 8

The above solution works but when user clicks on Select All or Unselect All option from Header this gets changed automatically

Answer 9

The feature to display Disabled Checkboxes is added to AG grid in version 28.1.0. Changelog here https://www.ag-grid.com/changelog/?fixVersion=28.1.0 . Here is the example from official docs https://www.ag-grid.com/react-data-grid/row-selection/#example-disabled-checkboxes In addition a feature also allows to checkboxes as selected and disabled. eg https://www.ag-grid.com/react-data-grid/row-selection/#example-force-enable-checkboxes