CODEWITHSUNDEEP
htmlangulartypescriptkendo-uikendo-grid
Ramious
Ramious

Reputation: 375

Angular 2 Kendo UI Grid display foreign key text

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.

Upvotes: 2

Views: 818

Answers (1)

topalkata
topalkata

Reputation: 2098

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

Upvotes: 1

Related Questions