CODEWITHSUNDEEP
angulardevextreme
dmoore1181
dmoore1181

Reputation: 2102

DevExtreme Custom dropdown per row

I have a devextreme grid in Angular that has 1 column that needs a drop down on each row, but the drop down is specific to the row, so the data source of the row includes the datasource for the drop down. Unfortunately it won't let me use something like [dataSource]="data.rowDataSourceInfo" on the dropdown (it just doesn't display anything and there isn't a console error). Does anyone know how to make this work correctly? I am using Devextreve version 20.1.7 and Angular version 9.2.4.

Upvotes: 2

Views: 2921

Answers (1)

dmoore1181
dmoore1181

Reputation: 2102

I finally figured out how to get this working.

Within the template you will need to setup both a lookup on the column and an edit cell template. Note that the datasource on the lookup has all the product names for the entire grid, this is used more for filtering the column than anything. The datasource in the edit cell template has only those product names that are applicable to the grid.

<dxi-column dataField="productId" dataType="string" caption="Product Name"  [allowEditing]="true"   editCellTemplate="changeProductNameEditor" >
   <dxo-lookup [dataSource]="allProductNames" valueExpr="productId" displayExpr="productName"></dxo-lookup>
</dxi-column>

<div *dxTemplate="let cellInfo of 'changeProductNameEditor'">
  <dx-select-box
    [items]="cellInfo.data.availableProductNames"
    [value]="cellInfo.value"
    displayExpr="productName"
    valueExpr="productId"
    (onValueChanged)="updateProductName($event, cellInfo)"
  >
</dx-select-box>
</div>

Within the component you will also have to add a method to handle on value changed:

updateProductName(eventData, cellInfo: any) {
  if (cellInfo.setValue) {
    cellInfo.setValue(eventData.value);
  }
}

Upvotes: 2

Related Questions