Angular Creating a Custom Multi-Checkbox Filter Menu Component

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

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

The Grid provides a built-in multi-checkbox filter. For more information, refer to the Multi-Checkbox Menu Filtering article.

Use the following approach only if you need to implement a custom multi-checkbox filter with heavily customized behavior or additional features beyond the built-in functionality.

How can I create a custom multi-checkbox filter menu component for the Grid that works with both primitive values and complex objects?

Solution

To create a custom multi-checkbox menu component and use it in the FilterMenu template of the Grid:

Create a custom component that will take the filter of the current column and the FilterService as inputs. Use a collection of the distinct Grid records for the respective field as data. The custom filter component can work with both primitive values and complex objects.

html

<kendo-grid-column field="ProductName" title="Product Name">
  <ng-template kendoGridFilterMenuTemplate
        let-column="column"
        let-filter="filter"
        let-filterService="filterService"
        >
        <multicheck-filter
          [isPrimitive]="true"
          [field]="column.field"
          [filterService]="filterService"
          [currentFilter]="filter"
          [data]="distinctPrimitive(column.field)"></multicheck-filter>
    </ng-template>
</kendo-grid-column>

Loop through the data to create a list of items with checkboxes and text. The items will correspond to the values of the respective Grid column. Attach the required handlers and bindings that will manage the selection and deselection of items.

html

<ul>
    @if (showFilter) {
    <li>
        <input class="k-textbox k-input k-rounded-md" (input)="onInput($event)" />
    </li>
    }
    @for (item of currentData; track item; let i = $index) {
    <li
        #itemElement
        (click)="onSelectionChange(valueAccessor(item), itemElement)"
        [ngClass]="{ 'k-selected': isItemSelected(item) }">
        <input
            type="checkbox"
            #notification
            kendoCheckBox
            [checked]="isItemSelected(item)" />
        <kendo-label
            class="k-checkbox-label"
            [for]="notification"
            [text]="textAccessor(item)">
        </kendo-label>
    </li>
    }
</ul>

Monitor the selected items and call the filterService.filter() method accordingly.

public onSelectionChange(item) {
    if(this.value.some(x => x === item)) {
        this.value = this.value.filter(x => x !== item);
    } else {
        this.value.push(item);
    }

    this.filterService.filter({
        filters: this.value.map(value => ({
            field: this.field,
            operator: 'eq',
            value
        })),
        logic: 'or'
    });
}

(Optional) Add a filtering feature for the list of options.

html
<li *ngIf="showFilter">
    <input class="k-textbox k-input k-rounded-md" (input)="onInput($event)" />
</li>
ts
public onInput(e) {
    this.currentData = distinct([
    ...this.currentData.filter(dataItem => this.value.some(val => val === this.valueAccessor(dataItem))),
    ...filterBy(this.data, {
        operator: 'contains',
        field: this.textField,
        value: e.target.value
    })],
    this.textField
    );
}

The following example demonstrates the full implementation of the described approach.

Change Theme

Theme

Loading ...

Creating a Custom Multi-Checkbox Filter Menu Component

Environment

Description

Solution

See Also