我找到了辦法。
container.component.html
<kendo-grid-column field="Employee_id" title="Employee" width="200">
<ng-template kendoGridCellTemplate let-dataItem>
<h4>{{category(dataItem.Employee_id)?.Name}}</h4>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter>
<my-dropdown-filter
[filter]="filter"
[data]="employees"
textField="Name"
valueField="Employee_id">
</my-dropdown-filter>
</ng-template>
container.component.ts
private employees;
constructor(
public dataServiceEmployees: EmployeesDashboardService,
) {
this.dataServiceEmployees.fetch('Employee',this.gridState).subscribe((x) => this.employees = x.data);
}
public category (id: number): any {
if(this.employees){
return this.employees.find(x => x.Employee_id === id);
}
}
，並使用過濾器模板：
個
custom.filter.ts
import { Component, Input } from '@angular/core';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { FilterService, BaseFilterCellComponent } from '@progress/kendo-angular-grid';
@Component({
selector: 'my-dropdown-filter',
template: `
<kendo-dropdownlist
[data]="data"
(valueChange)="onChange($event)"
[defaultItem]="defaultItem"
[value]="selectedValue"
[valuePrimitive]="true"
[textField]="textField"
[valueField]="valueField">
</kendo-dropdownlist>
`
})
export class DropDownListFilterComponent extends BaseFilterCellComponent {
public get selectedValue(): any {
const filter = this.filterByField(this.valueField);
return filter ? filter.value : null;
}
@Input() public filter: CompositeFilterDescriptor;
@Input() public data: any[];
@Input() public textField: string;
@Input() public valueField: string;
public get defaultItem(): any {
return {
[this.textField]: "Избери...",
[this.valueField]: null
};
}
constructor(filterService: FilterService) {
super(filterService);
}
public onChange(value: any): void {
this.applyFilter(
value === null ? // value of the default item
this.removeFilter(this.valueField) : // remove the filter
this.updateFilter({ // add a filter for the field with the value
field: this.valueField,
operator: "eq",
value: value
})
); // update the root filter
}
}