I have a requirement of selecting the whole column when the column header is clicked. I am unable to find any solution for this as there is no 'click' event for columns in ag-grid. Only events that I could find were to 'sort' or 'pin' columns. I also want to have column data on click so that I can perform other task based on which column was selected. Attaching screenshot for better understanding.
Solved this by extracting col-id attribute from all the divs having class name 'ag-header-cell'.
this.colElements = Array.from(
document.getElementsByClassName('ag-header-cell') as HTMLCollectionOf<
HTMLElement
>
);
And then adding click event listener on each item found. This will get us the col-id attribute when we click on column header.
this.colElements.forEach((elem, index) => {
elem.addEventListener('click', () => {
attribute = elem.getAttribute('col-id');
//you can add you custom styling based on selected index here
});
});
Next in the 'columnDefs' array we add custom 'cellStyle' by filtering cell items based on col-id we extracted.
columnDefs: [
{
headerName: 'State',
field: 'dynamic',
cellStyle: (params) => {
if (params.colDef.field === this.selectedColId) {
return { color: '#001D6D', backgroundColor: '#F3F7FF' };
}
return null;
},
},
],
Finally on every click event of event listener, we add 'redrawRow' function.
columnSelected(colId) {
this.gridOptions.api.redrawRows();
}