kendo ui - How to implement dropdown list in a grid for kendoUI for angular. Can't find any documentation

Question

Something like this. But this example is for kendoUI for jquery. I need documentation for kendoUI for angular.

Answer 1

I do it in my application. Here is a simple version of it:

HTML Template

<kendo-grid [data]="someData" [height]="750">
  <kendo-grid-column field="LaborType" title="Task" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ GetLaborTypeDesc(dataItem.LaborType)?.LaborTypeDesc }}
    </ng-template>
    <ng-template kendoGridEditTemplate>
      <kendo-dropdownlist [defaultItem]="{LaborTypeID: null, LaborTypeDesc: 'Select a task...'}" [data]="LaborTypes"
        textField="LaborTypeDesc" valueField="LaborTypeID" [valuePrimitive]="true">
      </kendo-dropdownlist>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Typescript

  LaborTypes: Array<{ LaborTypeDesc: string, LaborTypeID: number }> = [];

  public GetLaborTypeDesc(id: number): any {
    return this.LaborTypes.find(x => x.LaborTypeID === id);
  }

I have Add, Edit, and Delete commands in my grid that involves a form not seen here. I populate the LaborTypes object array in my ngOnInit function as well, so the user has options to choose in the dropdown.