diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts index dce543c623..884055bc04 100644 --- a/src/components/column/Column.d.ts +++ b/src/components/column/Column.d.ts @@ -45,6 +45,8 @@ interface ColumnProps { filterFunction?(value: any, filter: any): void; editor?(props: any): JSX.Element | undefined; editorValidator?(e: {originalEvent: Event, columnProps: any}): boolean; + onBeforeEditorHide?(e: {originalEvent: Event, columnProps: any}): any; + onBeforeEditorShow?(e: {originalEvent: Event, columnProps: any}): any; } export class Column extends React.Component {} diff --git a/src/components/column/Column.js b/src/components/column/Column.js index ab1182caa8..0ccb775fda 100644 --- a/src/components/column/Column.js +++ b/src/components/column/Column.js @@ -39,6 +39,8 @@ export class Column extends Component { editor: null, editorValidator: null, editorValidatorEvent: 'click', + onBeforeEditorHide: null, + onBeforeEditorShow: null, onEditorInit: null, onEditorSubmit: null, onEditorCancel: null, @@ -85,10 +87,12 @@ export class Column extends Component { rowSpan: PropTypes.number, editor: PropTypes.func, editorValidator: PropTypes.func, + editorValidatorEvent: PropTypes.string, + onBeforeEditorHide: null, + onBeforeEditorShow: null, onEditorInit: PropTypes.func, onEditorSubmit: PropTypes.func, onEditorCancel: PropTypes.func, - editorValidatorEvent: PropTypes.string, excludeGlobalFilter: PropTypes.bool, rowReorder: PropTypes.bool, rowReorderIcon: PropTypes.string, diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js index 4f667d853b..64b3872b9f 100644 --- a/src/components/datatable/BodyCell.js +++ b/src/components/datatable/BodyCell.js @@ -51,6 +51,13 @@ export class BodyCell extends Component { if (this.props.editMode !== 'row' && this.props.editor && !this.state.editing) { this.selfClick = true; + if (this.props.onBeforeEditorShow) { + this.props.onBeforeEditorShow({ + originalEvent: event, + columnProps: this.props + }); + } + this.setState({ editing: true }, () => { @@ -104,7 +111,14 @@ export class BodyCell extends Component { return this.container && !(this.container.isSameNode(target) || this.container.contains(target)); } - closeCell() { + closeCell(event) { + if (this.props.onBeforeEditorHide) { + this.props.onBeforeEditorHide({ + originalEvent: event, + columnProps: this.props + }); + } + /* When using the 'tab' key, the focus event of the next cell is not called in IE. */ setTimeout(() => { this.setState({ @@ -136,7 +150,7 @@ export class BodyCell extends Component { this.props.onEditorSubmit(params); } - this.closeCell(); + this.closeCell(event); } } diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js index 5e9e29cf58..d5957d8711 100644 --- a/src/showcase/datatable/DataTableDoc.js +++ b/src/showcase/datatable/DataTableDoc.js @@ -1167,6 +1167,18 @@ export const DataTableDemo = () => { click Event to trigger the validation, possible values are "click" and "blur". + + onBeforeEditorShow + function + null + Callback to invoke before the cell editor is shown. + + + onBeforeEditorHide + function + null + Callback to invoke before the cell editor is hidden. + onEditorInit function