Capture Grid column click event

[Dario S]

Hi all,

Is it possible to capture click event on grid's column header?

The solution suggested on Vue forum does not work for me -> https://www.syncfusion.com/forums/154272/grids-header-click

Also, I am using column reordering feature, so I would need it to stay working even in case I am handling click events inside the header.

Best,

Dario

[Sujith Kumar Rajkumar]

Hi Dario, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of capturing click event for the column header by binding ‘click’ event to the Grid element where the column header click can be checked by using its default class – “e-headercell”. This is demonstrated in the below code snippet, 

 

constructor() { 

    this.initialFlag = true; 

} 

 

// Grid’s dataBound event handler 

onDataBound() { 

    // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 

    if (this.initialFlag) { 

         // Click event is bound to the Grid element 

         this.gridInstance.element.addEventListener("click", this.onClick.bind(this)); 

         this.initialFlag = false; 

    } 

} 

 

// Grid click event function 

onClick(args) { 

    // Check if target is column header using its default class 

    if (args.target.closest(".e-headercell")) { 

         // Executes on column header click 

         var columnText = args.target.innerText; 

         alert(columnText + " is clicked"); 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-yvsgdq?file=index.js  

 

API link: https://ej2.syncfusion.com/react/documentation/api/grid/#databound  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Dario S]

What a excellent support.

Thank you.

[Sujith Kumar Rajkumar]

Hi Dario, 

Thank you for your appreciation. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R  

[Shubhi Sood]

How we should destroy this event listener?
Also if we attach event via method on

Here I am passing grid as context.

grid.on('click', grid)

How should i destroy this?

[Sujith Kumar Rajkumar]

Hi Shubhi, 

 

Based on the provided information we could understand that your requirement is to remove the ‘click’ event listener that is dynamically bound to the Grid element. You can achieve this by using the removeEventListener function on the Grid element and passing the same arguments as done for the addEventListener. 

 

This is demonstrated in the below code snippet, 

 

onBtnClick() { 

    this.gridInstance.element.removeEventListener("click", this.onClick); 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-yvsgdq-ho37ab?file=index.js  

 

API reference: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R