From 2543b0d6d817049e7ba21ce19079c1977ff31b81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 17 Jun 2021 16:43:39 +0300
Subject: [PATCH] Fixed #1347 - Row double click for DataTable

---
 api-generator/components/datatable.js   | 21 +++++++++++++++++++++
 src/components/datatable/DataTable.d.ts |  1 +
 src/components/datatable/DataTable.vue  |  9 ++++++++-
 src/components/datatable/TableBody.vue  |  6 +++++-
 src/views/datatable/DataTableDoc.vue    |  7 +++++++
 5 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index c8afa0b41f..9487ac6d69 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -506,6 +506,27 @@ const DataTableEvents = [
             }
         ]
     },
+    {
+        name: "row-dblclick",
+        description: "Callback to invoke when a row is double clicked.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Browser event."
+            },
+            {
+                name: "event.data",
+                type: "object",
+                description: "Selected row data."
+            },
+            {
+                name: "event.index",
+                type: "number",
+                description: "Row index"
+            }
+        ]
+    },
     {
         name: "row-contextmenu",
         description: "Callback to invoke when a row is selected with a ContextMenu",
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 8187d6667b..e51cecbfb7 100755
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -62,6 +62,7 @@ declare class DataTable extends Vue {
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;
     $emit(eventName: 'row-click', event: Event): this;
+    $emit(eventName: 'row-dblclick', event: Event): this;
     $emit(eventName: 'row-contextmenu', event: Event): this;
     $emit(eventName: 'row-select', event: Event): this;
     $emit(eventName: 'row-unselect', event: Event): this;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index c02cb59f40..df7e197177 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -28,7 +28,7 @@
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
-                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                     @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@@ -722,6 +722,13 @@ export default {
 
             this.rowTouched = false;
         },
+        onRowDblClick(e) {
+            const event = e.originalEvent;
+            if (DomHandler.isClickable(event.target)) {
+                return;
+            }
+            this.$emit('row-dblclick', e);
+        },
         onRowRightClick(event) {
             DomHandler.clearSelection();
             event.originalEvent.target.focus();
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index d941fba545..86a7391f81 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -12,7 +12,8 @@
                 </tr>
                 <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
                     v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
+                    @click="onRowClick($event, rowData, index)" @dblclick="onRowDblClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)"
+                    @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
                         <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
@@ -390,6 +391,9 @@ export default {
         onRowClick(event, rowData, rowIndex) {
             this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
         },
+        onRowDblClick(event, rowData, rowIndex) {
+            this.$emit('row-dblclick', {originalEvent: event, data: rowData, index: rowIndex});
+        },
         onRowRightClick(event, rowData, rowIndex) {
             this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
         },
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 363967d36e..94ec7c13ac 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2154,6 +2154,13 @@ export default {
                                     event.index: Row index.</td>
                                 <td>Callback to invoke when a row is clicked.</td>
                             </tr>
+                            <tr>
+                                <td>row-dblclick</td>
+                                <td>event.originalEvent: Browser event. <br />
+                                    event.data: Selected row data. <br />
+                                    event.index: Row index.</td>
+                                <td>Callback to invoke when a row is double clicked.</td>
+                            </tr>
                             <tr>
                                 <td>row-contextmenu</td>
                                 <td>event.originalEvent: Browser event. <br />