Ag-grid Angular How to get click events on Header?

Question

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.

Andy King · Accepted Answer · 2018-05-03 17:22:55Z

4

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!)

answered May 3, 2018 at 17:22

Andy King

1,6022 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KeTr Over a year ago

Thanks 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 Over a year ago

@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

abim · Accepted Answer · 2019-05-07 21:20:59Z

2

You could basically listen to the "sortChanged" event, that ag-grid provides when you click on the default header.

answered May 7, 2019 at 21:20

abim

336 bronze badges

2 Comments

Chris Over a year ago

Yes, and when in sortChanged, the event doesn't tell you which column, so call getSortModel() to get it.

Chris Over a year ago

And note that getSortModel() will have a null column every three click by default, so set the column sortingOrder to exclude 'no sort'

Anton Petrov · Accepted Answer · 2024-08-22 11:20:44Z

0

You can use onColumnHeaderClicked. For example:

 <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnsDef}
            onCellClicked={(event) => {
                console.log(event)
            }}
            onColumnHeaderClicked={(event) => {
                if (event.column.getId() === 'operations')
                    handleAdd()
            }}
            defaultColDef={{
                editable: true,
                sortable: false,
                suppressMovable: true,
                resizable: false
            }}
        />

answered Aug 22, 2024 at 11:20

Anton Petrov

434 bronze badges

Collectives™ on Stack Overflow

Ag-grid Angular How to get click events on Header?

Is there any way to get notified of click events on ag-grid's header in Angular?

Why do I need this?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Is there any way to get notified of click events on ag-grid's header in Angular?

Why do I need this?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related