Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

disable checkbox selection in Ag-grid

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.

like image 947
Amit Naik Avatar asked Apr 09 '18 10:04

Amit Naik


People also ask

How do you turn off cell selection on Ag grid?

suppressCellSelection = true we can disable cell selection for all columns' cells. Here the question is regarding not showing a specific column's cell's highlighted border when it is selected. You can achieve this by bit of CSS and cellClass property of ColDef .

How do you deselect on Ag grid?

To programatically deselect a single row, use rowNode. setSelected(false) . rowNode. setSelected(isSelected, clearSelection) can be used to select rows as well, and will deselect all rows other than the subject rowNode if clearSelection is true .

How do I select a checkbox in Ag grid?

Header Checkbox Selection It is possible to have a checkbox in the header for selection. To configure the column to have a checkbox, set colDef. headerCheckboxSelection=true . headerCheckboxSelection can also be a function, if you want the checkbox to appear sometimes (e.g. if the column is ordered first in the grid).

How do you highlight the selected row in Ag grid?

Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.


2 Answers

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);
like image 141
Amit Naik Avatar answered Sep 19 '22 13:09

Amit Naik


This worked for me

 cellStyle: params => {
          return params.data.myStatus ? {'pointer-events': 'none', opacity: '0.4' }
            : '';
        }
like image 27
kumar chandraketu Avatar answered Sep 21 '22 13:09

kumar chandraketu