How do I bind dropdown value in edit template to a field in grid

[Philemon Sackey]

Hi, I am trying to get a custom edit template for one field in the ejs-grid. I am able to get the data into the dropdown list but it does not get bound to the field. When I save the record, the custom field remains null.

<ejs-grid [dataSource]='contacts' [allowPaging]="true" [showColumnChooser]= 'true' [showColumnMenu]='true'
          [pageSettings]='pageSettings' [allowSorting]="true" [toolbar]='toolbar'
          [allowGrouping]="true" [allowReordering]='true' [editSettings]='editSettings'
          [allowFiltering]='true' [filterSettings]='filterSettings' [rowHeight]='40' [allowSelection]='true'
          [selectionSettings]="{ type: 'Multiple', mode: 'Both', persistSelection: true }" [allowExcelExport]='true'
          [contextMenuItems]="contextMenuItems" [allowPdfExport]="true"
          (beforeBatchSave)="batchSaveContact($event)" (batchDelete)="batchDeleteContact($event)">
  <e-columns>
    <e-column field='id' headerText='Id' [isIdentity]="true" [isPrimaryKey]="true" [visible]="false" [showInColumnChooser]="true"></e-column>
    <e-column field='name' headerText='Name' [validationRules]="{ required: true }" type="string" editType="stringedit"></e-column>
    <e-column field='content' headerText='Description' [validationRules]="{ required: true }" type="string" editType="stringedit"></e-column>
    <e-column field='type' headerText='Type' [validationRules]="{ required: true }">
      <ng-template #editTemplate let-data>
        <ejs-dropdownlist id="type" name="type" [dataSource]='modes' [(ngModel)]='data.type' [placeholder]="'Select Type'"></ejs-dropdownlist>
      </ng-template>
    </e-column>
    <e-column field='momoEnabled' headerText='For Momo?' displayAsCheckBox="true" width=120 type="boolean" editType="booleanedit"></e-column>
    <e-column field='isPrimary' headerText='Primary?' displayAsCheckBox="true" width=120 type="boolean" editType="booleanedit"></e-column>
    <e-column field='isActive' headerText='Active' displayAsCheckBox="true" width=120 textAlign="center" type="boolean" editType="booleanedit"></e-column>
    <e-column width=40 [commands]='commands'></e-column>
  </e-columns>
</ejs-grid>

[Joseph Christ Nithin Issack]

Hi Philemon,

  Greetings from Syncfusion support.

   Based on your query, you want to bind the value of the dropdown in the edit template. Your requirement, can be achieved using the `actionBegin` event of the EJ2 Grid. Please refer the below documentation, where we have demonstrated how to bind the datePicker value to the grid using edit template.

Documentation:  https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#using-template

Regards,

Joseph I.