How to embed dropDown HTML inside ag-grid column Headers?

Question

Below is the snapshot of ag-Grid and Kendo grid.

My question is how can I embed a dropdown/html inside the ag-Grid just like I did in kendo. I've tried to bind it with headerCellTemplate but it removes the columnName header from the grid and overwrite it with the dropDown html. I want it exactly same as in the Kendo grid.

Answer 1

Use the headerCellRenderer instead of headerCellTemplate attribute and build the following node :

1. A parent div
2. A child span with the headerName, you can get it from the params.colDe.headerName.
3. A child select element

For more details check the 2nd example of this link : https://www.ag-grid.com/angular-grid-header-rendering/index.php