Allow double click on column header

Question

Is it possible to have double click on the column header? If so, how do we implement that? We have a need where we want to edit non-kanban data that is relevant to the header and are wanting to pop open a dialog with unrelated fields based on the data in the header, specifically the data-key attribute.

Balasubramanian Sattanathan · Answer

Hi Mark, 

Greetings from Syncfusion Support. 
 
We have validated your requirement “Allow double click on column header” at our side and prepared a sample based on that using the below code snippet. 





dataBound: function (args) { 
  var headerEle = document.querySelector('.e-header-row'); 
  headerEle.addEventListener("dblclick", function () { 
    console.log("double-clicked"); 
  }); 
} 

Sample: https://stackblitz.com/edit/m2epvp?file=index.js 
 
Kindly try the above sample and let us know if you need further assistance. 
 
Regards, 
Balasubramanian S

Mark · Answer

Thank you. I had an event listener going but felt like I was hacking it together, but I guess its the right way! This works well:

var headerEle = document.querySelector('.e-header-row');
headerEle.addEventListener("dblclick", function (e) {
    var val = jQuery(e.target).closest('th').data('key');

});

Vengatesh Maniraj · Answer

Hi Mark, 

Thanks for the update. 

We are happy that your requirement has fulfilled. 

Regards, 
Vengatesh