Search code examples
javascriptreactjstypescriptag-grid

Is there a way to capture the row checkbox change event on AG Grid React?


I'm currently using AG Grid for React in one of my applications. All my rows have checkboxes to indicate further inspection. I want to capture when the checkbox checked state changes. I can use onRowSelected event for this but with one caveat, this event fires for both unselected rows and checkboxes. I need something to differentiate between an actual checkbox value/event and a row selection.

I need an event or an atribute/function that only fires/specifies when checkbox is checked/unchecked.

Is this available on Ag-grid React?


Solution

  • Okay you want to capture only if the row is selected by a checkbox event.

    Well if you dig through the event parameter of the grid events, you can get lots of details. I like this feature of Ag-Grid.

    onRowSelected has a parameter called source. We can use it for this purpose.

    const onRowSelected = useCallback((event) => {
      console.log('onRowSelected event', event);
    
      if (event.source === 'checkboxSelected')
        window.alert(
          'Node is ' +
            (event.node.isSelected() ? 'selected' : 'deselected') +
            ' by checkbox'
        );
    }, []);
    

    Here you are, I got a plunker ready for you as a reference: https://plnkr.co/edit/qlZOvGrYmwbszP12?preview

    Further reading: https://www.ag-grid.com/react-data-grid/grid-events/#reference-selection-rowSelected