how to apply selectAll and deSelectAll to the header checkbox in ag-grid react

Question

I have added checkboxSelection to my first column and also the headerCheckBoxSelection.

columnDefs: [
  {
    minWidth: 45,
    maxWidth: 45,
    headerCheckboxSelection: true,
    checkboxSelection: true,
    lockPosition: true,
    hide: selectedHeaders.length === 0 ? true : selectedHeaders.includes('Name')
  },

But the header checkbox for select and deseltall doesn't work. I've added two callbacks for selectAll and deselectAll but I'm not sure where to add these callbacks so that I can select and deselect all rows:

const deselectAllHandler = useCallback(() => {
 gridApi.deselectAll();
}, [gridApi]);

const selectAllHandler = useCallback(() => {
 gridApi.selectAll();
}, [gridApi]);

I'm able to select individual checkboxes and retrieve the selected rows, but not able to select all and deselect all

Thanks in advance!

anik4404 anik4404 · Accepted Answer · 2021-03-22T02:30:34

My Apologies, The Grid component I have been using was a shared component and someone had the mouse click disabled on that checkbox. So, this property headerCheckboxSelection: true is enough to allow select and deselect all.

how to apply selectAll and deSelectAll to the header checkbox in ag-grid react

1 Answers