Angular Opening the Grid Column Menu by Clicking the Header in Angular

New to Kendo UI for Angular? Start a free 30-day trial

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

By default, the Kendo UI for Angular Grid displays a column menu icon that users can click to open a menu with various options. In some scenarios, you might want to open this column menu by clicking the column header instead and hide the default column menu icon. This knowledge base article demonstrates how to achieve this behavior by customizing the Grid's column header template.

This knowledge base article also answers the following questions:

How can I open the Grid's column menu by clicking on the column header?
How do I hide the column menu icon in the Kendo UI for Angular Grid?
How can I customize the column header template in the Angular Grid?

Solution

To allow end-users to open the column menu by clicking on the column header and to hide the default column menu icon altogether, customize the column header template and apply specific styles. Here's how to achieve it:

Use the kendoGridHeaderTemplate directive to customize the column header template. Within this template, you can attach a click event to the header element.

html

<kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        <div (click)="showMenu($event) style="width: 100%; height:100%">
            {{ column.field }}
        </div>
    </ng-template>
</kendo-grid-column>

In the click event handler, programmatically trigger a click event on the column menu icon. This can be achieved using the DOM click() method.

typescript

public showMenu(event: MouseEvent): void {
    const target = (event.target as HTMLElement).closest('.k-header') as HTMLElement;

    if (!target) return;

    const columnMenu = target.querySelector('.k-grid-header-menu') as HTMLElement;

    if (columnMenu) {
        setTimeout(() => columnMenu.click());
    }
}

Hide the default column menu icon by setting its 'visibility' to hidden. This might require custom CSS.
css
```
.k-grid-header-menu {
    visibility: hidden;
}
```

Adjust the position of the hidden column menu to not take up space in the layout.

css

kendo-grid-column-menu {
    width: 0px;
    position: absolute;
    z-index: -1;
    cursor: pointer;
}

The following example demonstrates the complete implementation of the above steps.

Change Theme

Theme

Loading ...

Opening the Grid Column Menu by Clicking the Header in Angular

Environment

Description

Solution

See Also