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

Add a Custom Reset Button to the Grid Column Chooser

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Add a custom Reset button to the Grid Column Chooser that restores columns to their default state and automatically closes the Column Menu. The built-in Reset button only reverts uncommitted changes made during the current session and does not close the menu.

This Knowledge Base article also answers the following questions:

How to reset Grid columns to default state in Kendo UI for Angular?
How to close the Column Menu programmatically after resetting columns?
How to create a custom column chooser with full control over column visibility?

Solution

The built-in Reset button only undoes changes made since the Column Chooser was opened, without applying them. This behavior is intentional.

Create a custom column chooser component with full control over the column visibility state. This component adds a button that resets columns to their default state and automatically closes the menu.

Change Theme

Theme

Loading ...

To implement this functionality, follow these steps:

Define the default column configuration. Create an array that maintains the initial visibility state of all Grid columns.

typescript

public gridColumns = [
    { field: 'id', hidden: false, title: 'ID', width: 70 },
    { field: 'name', hidden: false, title: 'Name', width: 180 },
    { field: 'category', hidden: false, title: 'Category' },
    { field: 'price', hidden: false, title: 'Price' }
];

Create a custom column chooser component outside the Grid. Use a Popup component to display the column list with checkboxes for toggling visibility.

html

<kendo-popup [anchor]="anchor" *ngIf="show">
    <div class="content">
        <ul>
            <li *ngFor="let col of gridColumns">
                <kendo-checkbox
                    (checkedStateChange)="onCheckBoxChange(col.field)"
                    [checkedState]="col.hidden"
                ></kendo-checkbox>
                <kendo-label [text]="col.title"></kendo-label>
            </li>
        </ul>
    </div>
</kendo-popup>

Add a custom Reset button that restores the default state. When clicked, the button resets the columns to their original configuration and closes the popup.

typescript
public restoreColumns(): void {
    this.hiddenColumns = [];
    this.gridColumns.map((col) => (col.hidden = false));
    this.onToggle(); // Close the popup
}
html
<button kendoButton (click)="restoreColumns()">Reset</button>
<button kendoButton [primary]="true" (click)="hideColumn()">Apply</button>

Update column visibility programmatically through the component. Bind the Grid columns to the component state and update the hidden property based on user interactions.

typescript
public hideColumn(): void {
    this.hiddenColumns = this.currentlyHidden.slice();
    this.onToggle();
}
html
<ng-template ngFor [ngForOf]="gridColumns" let-column>
    <kendo-grid-column
        field="{{ column.field }}"
        [hidden]="hiddenColumns.indexOf(column.field) > -1"
        title="{{ column.title }}"
    >
    </kendo-grid-column>
</ng-template>

Add a Custom Reset Button to the Grid Column Chooser

Environment

Description

Solution

See Also