Angular 2 Kendo UI Grid display foreign key text - html

Question

I have a cart like system for a PO using Angular 4 and ASP.NET CORE WEB APIs. I have two main calls getting the PO details and then all of the "Cart" line items for a specific PO. I have related funding category ids and project ids in the table because finance people need to adjust these. I need to get the Kendo UI grid to display the text of the related foreign key. I will be implementing edit soon hence the ng-template but working on having the non-edit view with the text value displayed. The office id is a simple integer and the office data returns id and name in JSON
HTML
<kendo-grid
[data]="view | async"
[pageSize]="gridState.take"
[skip]="gridState.skip"
let-dataItem="dataItem">
<kendo-grid-column field="productName" title="Product Name">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<input [(ngModel)]="dataItem.productName" name="productName" class="k-textbox" />
</ng-template>
<kendo-grid-column>
<kendo-grid-column field="officeId" **<!--Fix here??-->** title="Office">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist name="officeName"
[data]="office"
[textField]="'name'"
[valueField]="'id'"
[valuePrimitive]="true"
[(ngModel)]="dataItem.officeId">
</kendo-dropdownlist>
</ng-template>
<kendo-grid-column>
...
</kendo-grid>
Typescript
public po: PO = {
id: 0,
poNumber: '',
...
}
public cart: Cart[] = [{
id: 0,
productName: '',
officeId: 0,
...
}];
office: any[];
...
constructor(
private route: ActivatedRoute,
private router: Router,
private cartService: CartService, //has cart items
private referenceService: ReferenceService //has office FK and text value
#Inject(CartEditService) editServiceFactory: any){
route.params.subscribe(p => {
this.po.id = +p['id'] || 0;
});
this.cartEditService = editServiceFactory();
this.view = this.cartEditService.map(data => process(data, this.gridState));
}
ngOnInit(){
//todo implement check for new po or existing
this.cartService.getPo(this.po.id).subscribe(po => this.po = po);
this.cartEditService.read(this.po.id);
this.referenceService.getOffices().subscribe(office => this.office = office)
...
}
//To Do add the action handlers for grid
Added solution thanks to topalkata
HTML
<kendo-grid-column title="Office">
<ng-template kendoGridCellTemplate let-dataItem>
{{getOfficeNameById(dataItem.officeId)}}
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist name="officeName"
[data]="office"
[textField]="'name'"
[valueField]="'id'"
[valuePrimitive]="true"
[(ngModel)]="dataItem.officeId">
</kendo-dropdownlist>
</ng-template>
<kendo-grid-column>
Typescript
public office: Reference[] = [{
id: 0,
name: ''
}];
...
public getOfficeNameById(id: number){
return this.office.find(office => office.id === id).name;
}
Thanks again!! I don't have enough rep to up vote answer.

Answer 1

You can use Cell template and bind the content to a method that will return the Office name by ID (the ID is available as part of the dataItem, accessible in the template), e.g.:
<kendo-grid-column field="CategoryID" title="Category">
<ng-template kendoGridCellTemplate let-dataItem>
{{getCategoryNameById(dataItem.CategoryID)}}
</ng-template>
</kendo-grid-column>
...
public categories = [{
CategoryID: 1,
CategoryName: 'Beverages'
}, {
CategoryID: 2,
CategoryName: 'Condiments'
}, {
CategoryID: 7,
CategoryName: "Produce",
}, {
CategoryID: 6,
CategoryName: "Meat/Poultry",
}, {
CategoryID: 8,
CategoryName: "Seafood",
}];
public getCategoryNameById(id: number) {
return this.categories.find(c => c.CategoryID === id).CategoryName;
}
EXAMPLE