Showing Drop down for column in a row of table

Question

I have created one table using DevExtreme module and find the below code

<div id="data-grid">
  <div id="data-grid-table">
    <dx-data-grid id="gridContainer" keyExpr="emailId"  [dataSource]="userAccessList" [allowColumnReordering]="true" (onRowUpdated)="onRowUpdated($event)" (onRowRemoved)="onRowRemoved($event)" [showRowLines]="true" [showBorders]="true">
      <dxo-editing mode="row" refreshMode="repaint" [allowUpdating]="true" [allowDeleting]="true" [useIcons]="true"></dxo-editing>
      <dxi-column dataField="emailId" alignment="center" [allowEditing]="false" ></dxi-column>
      <dxi-column dataField="name" alignment="center" caption="name">
      </dxi-column>
      <dxi-column dataField="Designation" alignment="center" caption="Designation" [width]="100">
      </dxi-column>
    </dx-data-grid>
  </div>
</div>

The above display properly but when I click on edit icon, for name field it showing input field but I need dropdown list.

Please some one help me on this to resolve?

Thanks in Advance.

Answer 1

Use <dxo-lookup> with the list of name to choose from as the dataSource:

<dxi-column dataField="name" alignment="center" caption="name">
    <dxo-lookup [dataSource]="listOfNames"></dxo-lookup>
</dxi-column>

Note: If your name is an object and not a string (lets say listOfNames = [ {firstname: '', lastname: ''}, ... ] for an example), you can display and use specific properties from the object like so:

<dxi-column dataField="name" alignment="center" caption="name">
    /**Uses the firstname as the value selected and as the value displayed in the dropdown list*/
    <dxo-lookup [dataSource]="listOfNames" valueExpr="firstname" displayExpr="firstname"></dxo-lookup>
</dxi-column>