Fixed #2312 - New DataTable editor callbacks

src/components/column/Column.d.ts

@@ -269,6 +269,10 @@ export interface ColumnSlots {
          * Whether the row is frozen.
          */
         frozenRow: boolean;
+        /**
+         * Callback function
+         */
+        editorInitCallback: () => void;
     }) => VNode[];
     /**
      * Custom header template.
@@ -280,7 +284,7 @@ export interface ColumnSlots {
          */
         column: Column;
     }) => VNode[];
-     /**
+    /**
      * Custom footer template.
      * @param {Object} scope - footer slot's params.
      */
@@ -315,8 +319,16 @@ export interface ColumnSlots {
          * Whether the row is frozen.
          */
         frozenRow: boolean;
+        /**
+         * Callback function
+         */
+        editorSaveCallback: () => void;
+        /**
+         * Callback function
+         */
+        editorCancelCallback: () => void;
     }) => VNode[];
-     /**
+    /**
      * Custom filter template.
      * @param {Object} scope - filter slot's params.
      */
@@ -354,7 +366,7 @@ export interface ColumnSlots {
          */
         filterCallback: () => void;
     }) => VNode[];
-     /**
+    /**
      * Custom filter footer template.
      * @param {Object} scope - filter footer slot's params.
      */

src/components/datatable/BodyCell.vue

@@ -4,8 +4,8 @@
     </td>
     <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
         <span v-if="responsiveLayout === 'stack'" class="p-column-title">{{columnProp('header')}}</span>
-        <component :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
+        <component :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" v-if="column.children && column.children.body && !d_editing" />
-        <component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
+        <component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorSaveCallback="editorSaveCallback" :editorCancelCallback="editorCancelCallback" v-else-if="column.children && column.children.editor && d_editing" />
         <component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" />
         <template v-else-if="columnProp('selectionMode')">
             <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" v-if="columnProp('selectionMode') === 'single'" />
@@ -326,6 +326,15 @@ export default {
         onRowEditCancel(event) {
             this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
         },
+        editorInitCallback(event) {
+            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
+        editorSaveCallback(event) {
+            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
+        editorCancelCallback(event) {
+            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');

src/views/datatable/DataTableDoc.vue

@@ -415,7 +415,8 @@ export default {
                                 column: Column node <br />
                                 field: Column field <br />
                                 index: Row index <br />
-                                frozenRow: Is row frozen</td>
+                                frozenRow: Is row frozen<br />
+                                editorInitCallback: Callback function</td>
                         </tr>
                         <tr>
                             <td>footer</td>
@@ -427,7 +428,9 @@ export default {
                                 column: Column node <br />
                                 field: Column field <br />
                                 index: Row index <br />
-                                frozenRow: Is row frozen</td>
+                                frozenRow: Is row frozen <br />
+                                editorSaveCallback: Callback function <br />
+                                editorCancelCallback: Callback function</td>
                         </tr>
                         <tr>
                             <td>filter</td>