Kendo UI 网格中的过滤列模板答案

【问题标题】：Filtering column template in Kendo UI gridKendo UI 网格中的过滤列模板
【发布时间】：2019-07-26 08:22:00
【问题描述】：

In this plunk 我有一个用于 Angular 网格的 Kendo UI，有两列。第一列是模板，第二列是没有模板的字符串字段。

网格是可过滤的，但只有第二列显示输入过滤器的字段。第一列没有，因为它是一个模板，Kendo 不知道要过滤什么。

模板实际上是一个锚点，格式为：<a (click)="...">{{dataItem.ContactName}}</a> 我需要按字段ContactName 进行过滤。如何实现？

@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;

}

【问题讨论】：

标签： angular kendo-ui kendo-ui-angular2

【解决方案1】：

网格不知道如何过滤/过滤什么，因为您在第一列中缺少 field 属性。

一旦该属性可用，该列就会显示过滤器输入。

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

Updated Plunker

【讨论】：