Fixed #1347 - Row double click for DataTable

primefaces · Jun 17, 2021 · 2543b0d · 2543b0d
1 parent e480bf4
commit 2543b0d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 />