How to use a custom dialog on double click

Question

Hello support teamWhen I double click on the row, the edit dialog open. But I like to use a custom dialog.How can I stop the event on row double click? I tried with cancel=true, but no success.Do you have an example?Thanks in advance.Peter

Udhayakumar Anand · Answer

Hi PeterGreetings from Syncfusion,We have carefully reviewed your query, and we have
identified a solution that can help you achieve your requirements. To stop the
default behavior of the edit dialog opening when double-clicking on a row, you
can utilize the actionBegin event with the requestType set to beforeOpenEditDialog.
By setting args.cancel to true within this event, you can cancel
the default dialog from opening. After that, you can open your custom dialog by
setting the visibility of the dialog to true.Here is a code snippet that demonstrates how to achieve
this:

Code Snippet:
  /*App.vue*/
  dlgButtons:
  [
          {
           
  click: this.dlgBtnClick,
           
  buttonModel: { isPrimary: "true", content: "Update Task"
  },
          },
        ],
  …..//////
  actionBegin: function (args) {
          if (args.requestType ===
  "beforeSave") {
           
  proxy.$refs.dialogObj.visible = false;
          }
          if (args.requestType === "beforeOpenEditDialog")
  {
            args.cancel = true;
           
  proxy.$refs.dialogObj.visible = true;
           
  document.getElementById("dialog").style.top = "150px";
            //proxy.$refs.gantt.ej2Instances.openEditDialog();
          }
        },
        recordDoubleClick: function (args) {
         
  proxy.$refs.gantt.ej2Instances.hideSpinner();
          //
  proxy.$refs.gantt.ej2Instances.dialogOpen()
         
  console.log(args);
        },
  methods: {
        dlgBtnClick: function () {
        var index = this.$refs.gantt.ej2Instances.selectionModule
         
  .selectedRowIndexes[0];
        var data =
  this.$refs.gantt.ej2Instances.currentViewData[index];
        data.TaskName =
  "Updated Task";
       
  this.$refs.gantt.ej2Instances.updateRecordByID(data);
      },
   
  }

Sample Link : https://codesandbox.io/s/272413-getselectedrowsfrom-cell-forked-hm45pmWe hope this solution has answered your query, If you have
further questions, please feel free to contact usRegards,Udhayakumar