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

Displaying Filtered Columns Summary above the Grid

Updated on Feb 19, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

I want to display a summary of filtered columns in a dedicated section above the Kendo UI for Angular Grid. Users should be able to see which columns are currently filtered and have the option to remove individual filters from the summary display.

This Knowledge Base article also answers the following questions:

How to show a summary of applied filters above the Grid?
How to track which columns are currently filtered in the Grid?
How to show filtered columns as chips in Kendo UI for Angular Grid?
How to sync chip removal with filter updates in Kendo UI for Angular Grid?

Solution

To display a summary of filtered columns above the Grid, handle the filterChange event to track which columns have active filters. Then, maintain a collection of the filtered columns and display them in a custom summary section where users can remove individual filters.

Follow these steps to implement a filtered columns summary:

Declare the necessary properties to store the filtered columns and the current filter state.

typescript

public filteredColumns: FilterDescriptor[] = [];
public filters: CompositeFilterDescriptor = { logic: 'and', filters: [] };

Handle the filterChange event of the Grid to track filtered columns.

typescript

public onFilterChange(e: CompositeFilterDescriptor): void {
    this.filters = e;

    if (e.filters.length > 0) {
        this.filteredColumns = e.filters
            .filter((f): f is CompositeFilterDescriptor => 'filters' in f && Array.isArray(f.filters))
            .map((f) => f.filters[0] as FilterDescriptor)
            .filter((f): f is FilterDescriptor => 'field' in f);

        // Remove duplicates based on field name
        this.filteredColumns = this.filteredColumns.filter(
            (filter, index, self) =>
                index === self.findIndex((f) => f.field === filter.field)
        );
    } else {
        this.filteredColumns = [];
    }
}

In the event handler, extract all active filters from the CompositeFilterDescriptor, remove duplicates based on field name, and update the filtered columns collection accordingly.

Add a section above the Grid to display the filtered columns summary. Use visual elements like chips or badges to represent each filtered column.

html

<div class="filter-summary">
    @if (filteredColumns.length > 0) {
        @for (column of filteredColumns; track column.field) {
            <kendo-chip
                [label]="getFilterLabel(column)"
                [removable]="true"
                themeColor="info"
                (remove)="onRemove($event)"
            ></kendo-chip>
        }
    }
</div>

In this example, the Kendo UI for Angular Chip component is used to display the filtered columns in the summary section.

Implement the removal functionality by handling the remove event of the Chip. When a user removes a filter chip, extract the field name and remove it from the displayed filtered columns collection.

typescript

public onRemove(e: ChipRemoveEvent): void {
    const chipLabel = e.sender.label || '';
    const fieldName = this.extractFieldName(chipLabel);

    const index = this.filteredColumns.findIndex((c) => c.field === fieldName);
    if (index > -1) {
        this.filteredColumns.splice(index, 1);
    }

    // ...
}

Update the Grid filter state by removing the filter from the CompositeFilterDescriptor and emit the filterChange event with the updated filters to apply the changes to the Grid.

typescript

public onRemove(e: ChipRemoveEvent): void {
   // ...

    const filterIndex = (this.filters.filters as CompositeFilterDescriptor[]).findIndex(
        (f) => f.filters && f.filters[0] && (f.filters[0] as FilterDescriptor).field === fieldName
    );

    if (filterIndex > -1) {
        this.filters.filters.splice(filterIndex, 1);
    }

    this.grid.filterChange.emit(this.filters);
}

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

Displaying Filtered Columns Summary above the Grid

Environment

Description

Solution

See Also