How to connect second datasource to the same kendo-grid - kendo-ui-angular2

Question

I want to use the second datasource [data] to replace the IDs of a column with the NAMEs from another table(from another datasource) which have a common ID field. I have tried with kendo-grid-span-column, but it is working only with the same datasource as the grid.
<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>
Any ideas?
Thanks,
Martin

Answer 1

I found the way.
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);
}
}
And using a filter template:
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
}
}