CODEWITHSUNDEEP
ag-grid
Stellar Sword
Stellar Sword

Reputation: 6216

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

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

Upvotes: 4

Views: 31996

Answers (3)

Majd Sayed Taha
Majd Sayed Taha

Reputation: 11

You do not need any suppressed attributes by using this rowMultiSelectWithClick set to true.

Upvotes: 0

tim-phillips
tim-phillips

Reputation: 1087

You can use the built-in rowMultiSelectWithClick to do row toggle selection on the whole row without pressing keyboard keys.

var gridOptions = {
    columnDefs: columnDefs,
    rowSelection: 'multiple',
    rowMultiSelectWithClick: true,
    rowData: rowData
};

Upvotes: 0

Stellar Sword
Stellar Sword

Reputation: 6216

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

Upvotes: 9

Related Questions