Question

我想使用第二个数据源[data]将列的ID替换为具有公共ID字段的另一个表（来自另一个数据源）的NAME。我尝试过使用kendo-grid-span-column，但它只使用与网格相同的数据源。

<form novalidate #myForm="ngForm"> 
<kendo-grid
    [data]="gridData | async"
        <kendo-grid-column field="Contract_id" title="Contract_id"></kendo-grid-column> 
        <kendo-grid-span-column>
            <kendo-grid-column field="Employee_id" title="Employee_id">
            </kendo-grid-column>
            <ng-template kendoGridCellTemplate let-dataItem>
                <h4>{{dataItem.NameFromAnotherDataSource}}</h4>
            </ng-template>
        </kendo-grid-span-column>
        <kendo-grid-column field="Contract_Num" title="Contract_Num"></kendo-grid-column>

</kendo-grid>

有什么想法吗？

谢谢，马丁

Answer 1

我找到了方法。

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
    }
}

如何将第二个数据源连接到同一个kendo-grid

1 个答案: