How can I have an onclick event in the DataGrid for any Column | React

Question

How can I have an onclick event in the DataGrid for any Column

<GridComponent id="gridcomp" dataSource={dataSource} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 10 }} commandClick={handleDecisionClick} toolbar={["Search"]}>
<ColumnDirective field="employee_id" headerText="Employee ID" width="10%"></ColumnDirective>
<ColumnDirective field="name" headerText="Employee Name" width="15%"></ColumnDirective>
<Inject services={[Page, CommandColumn, Edit, Search, Sort, Toolbar, Resize, Scroll]} />
</GridComponent>

Answer 1

We have checked your query and we could see that you like to trigger an event while the column is selected. You can achieve your requirement by using the inbuilt events of Grid. Please refer to the below code example and sample for more information.

export class Selectioning extends SampleBase {
    columnSelected(args) {
            console('column is selected');
    }
    render() {
        
        return (<div className='control-pane'>
                <div className='control-section'>
                    <GridComponent dataSource={data} columnSelected={this.columnSelected} allowPaging={true} pageSettings={{ pageCount: 5 }} selectionSettings={{ allowColumnSelection: true,type: 'Multiple' }}>
                        <ColumnsDirective>
                            <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
                            <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'/>
                            <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
                            <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign="Right"></ColumnDirective>
                        </ColumnsDirective>
                        <Inject services={[Page, Selection]}/>
                    </GridComponent>
                </div>

            </div>);
    }
}

Sample: https://stackblitz.com/edit/react-6wnq3w

Documentation: https://ej2.syncfusion.com/documentation/grid/selection/column-selection/

API: https://ej2.syncfusion.com/react/documentation/api/grid/#columnselected

https://ej2.syncfusion.com/react/documentation/api/grid/#columnselecting

https://ej2.syncfusion.com/react/documentation/api/grid/#columndeselected

https://ej2.syncfusion.com/react/documentation/api/grid/#columndeselecting