Ag-grid Angular How to get click events on Header?
Solution 1
I think this may be possible if you define the header component (see: Header Components). In your template for the header component you can create a div
element (or any other container element) and define the (click)
event handler. This worked for me:
<div (click)='onHeaderClick($event)'>
<p>Name</p>
</div>
(Of course you'd probably want to pass the header title in the parameters to the agInit()
method, since you wouldn't want to create a separate header component for every header!)
Solution 2
You could basically listen to the "sortChanged" event, that ag-grid provides when you click on the default header.
Comments
-
KeTr almost 2 years
Is there any way to get notified of click events on ag-grid's header in Angular?
The
<ag-grid-angular>
-Component offers multiple events for clicks on cells (e.g. cellDoubleClicked). Those don't get triggered for header clicks and I was unable to find any events specific for header clicks.This question was already asked by someone else in the past and not answered, so I don't think, there's any built in way.
Why do I need this?
I'm working with another library to supply context menus for the application, but I want to differentiate between different context menus for headers and regular cells. So just listening to the default angular click event (on the whole grid component) doesn't help, because I need the clicked column/cell.
For reference I'm currently using ag-grid 15.0.0, but I also didn't find anything in the current documentation.
-
KeTr about 6 yearsThanks for your answer. After some investigation it seems, that when implementing a custom Header Component, there's no real fallback behavior. I'd have to implement and maintain sorting and styling myself and I'm not a fan of that.
-
Andy King about 6 years@KeTr I agree that it's not ideal, but it doesn't look as daunting as you might think. Take a look at this Plunker ... the
header-component
appears to implement the features you need: embed.plnkr.co/plunk/1rHK9l -
Chris almost 5 yearsYes, and when in sortChanged, the event doesn't tell you which column, so call getSortModel() to get it.
-
Chris almost 5 yearsAnd note that getSortModel() will have a null column every three click by default, so set the column sortingOrder to exclude 'no sort'