如何在 DataGrid 中为任何列设置 onclick 事件 |反应

Question

如何在 DataGrid 中为任何列设置 onclick 事件

<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

我们检查了您的查询，发现您希望在选择该列时触发事件。您可以使用 Grid 的内置事件来实现您的要求。请参考下面的代码示例和示例以获取更多信息。

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>);
    }
}

样本：https://stackblitz.com/edit/react-6wnq3w

文档：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

如何在 DataGrid 中为任何列设置 onclick 事件 |反应

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

syncfusion

reactjs

ej2-syncfusion