Filtering column template in Kendo UI grid

Question

In this plunk I have a Kendo UI for Angular grid with two columns. The first column is a template and the second column is a string field without a template.

The grid is filterable, but only the second column shows the field to enter the filter. The first column does not as it's a template and Kendo doesn't know what to filter.

The template is actually an anchor with the format: <a (click)="...">{{dataItem.ContactName}}</a> I need to filter by the field ContactName. How to achieve that?

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid #grid [kendoGridBinding]="gridData" 
            [filterable]="true" [resizable]="true">
        <kendo-grid-column title="Contact Name">
            <ng-template kendoGridCellTemplate let-dataItem>
                <a href="javascript:void(0)"
                    (click)="alert(dataItem.ContactName)">
                   {{dataItem.ContactName}}
                </a>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="City" title="City"></kendo-grid-column>    
      </kendo-grid>   `
})
export class AppComponent {

    @ViewChild('grid') grid: GridBinding;

    public gridData: any[] = customers;

}

Philipp Philipp · Accepted Answer · 2019-03-05T05:03:08

The grid does not know how/what to filter because you are missing the field attribute on your first column.

As soon as this attribute is available the column shows the filter-input.

<kendo-grid-column field="ContactName" title="Contact Name">
                   ~~~~~~~~~~~~~~~~~~
    <ng-template kendoGridCellTemplate let-dataItem>
        ...
    </ng-template>
</kendo-grid-column>

Updated Plunker

Filtering column template in Kendo UI grid

1 Answers