Facing issue with DataTable template column

[Rithuu]

Hi Team,

I've two buttons in Templated ActionColumn. The onClick event of these buttons is unable to access any function or props/state of parent component.

actionTemplate(rowData, column) {
return (<div>
<Button type="button" icon="fa-save" className="ui-button-success"></Button>
<Button type="button" icon="fa-times" className="ui-button-danger" onClick={(e) => console.log(this.props)} />
</div>);
}

<Column body={this.actionTemplate} style={{textAlign:'center', width: '6em'}}/>

this.props is evaluating as undfined.
===================================================================================================
handleDelete(e) {
e.preventDefault();
console.log(this.state.selectedItem);
}

actionTemplate(rowData, column) {
return (<div>
<Button type="button" icon="fa-save" className="ui-button-success"></Button>
<Button type="button" icon="fa-times" className="ui-button-danger" onClick={this.handleDelete} />
</div>);
}

Error in developer console as it could not identify "handleDelete"

Thanks,
Rithuu

[mert.sincan]

Hi,

For first issue, you can use column object; <Button type="button" icon="fa-times" className="ui-button-danger" onClick={(e) => console.log(column)} />

For second issue, you need to bind your method. Please try; <Button type="button" icon="fa-times" className="ui-button-danger" onClick={this.handleDelete.bind(this)} />