Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ag-grid row checkbox select. Making checkbox selection equivalent to row-selection

Tags:

ag-grid

(What I'm trying to do: you know how you CTRL or SHIFT to select multiple rows? Why not just make it a click toggle without keyboard keys needed?)

I'm trying to make it so that rowSelected event or rowClicked event should always check the checkbox on the left column for the whole row.

And add onto it, so click on another row, adds it on. Click on another row, checks that and selects that row as well.

Click on an already-selected already-checked row... and it should "uncheck" and "deselect".

So... Row select multiple + checkbox multiple, are equivalent.

              "rowSelection": "multiple",
              "onRowSelected": rowSelected,
              "suppressRowClickSelection": false,


function rowSelected(event){
    console.log("t1 " + event.node.isSelected());
    if(event.node.isSelected()){
        event.node.setSelected(false);
    } else {
        event.node.setSelected(true);
    }
}

Plunker EXAMPLE:

https://embed.plnkr.co/vf0aV6Q0MgA4ZvtzWhFb/

(Plunker example, you cannot uncheck a row anymore)

like image 498
Dexter Avatar asked Feb 04 '23 20:02

Dexter


1 Answers

Solved. Basically overriding their default "selection model".

function RowClickEventHandler(event){
    if(event.node.isSelected()){
      console.log("deselected");
      event.node.setSelected(false, false);
    } else {
      event.node.setSelected(true);
      console.log("selected, add");
    }

}

var gridOptions = {
    columnDefs: columnDefs,
    onRowClicked: RowClickEventHandler,
    suppressRowClickSelection: true,
    suppressCellSelection: true,
    rowSelection: 'multiple',
    rowData: null
};

https://plnkr.co/edit/KHj1lstv9GQncxlX4Gvx?p=preview

like image 154
Dexter Avatar answered May 18 '23 03:05

Dexter