I have an igx-grid with batch editing. One of the columns of the grid is with a dropdown list.

The data of the grid is derived from a database. The changed values of the column with dropdown list are added to the transactions, but when I reload the page, the cell values in the column with dropdown are empty.

How can I set the value of each row of drop down list, something similar to default value, but in my case I have different values for different rows.

The problem is that when the page is reloaded, the values of the column with a dropdown list is never changed and is always null and each cell of the column with dropdown list has a different value.

  <igx-grid igxPreventDocumentScroll
            #grid1
            igxOverlayOutlet
            [autoGenerate]='false'
            rowHeight="60px"
            [emptyGridMessage]="'Das Gitter ist leer'"
            [batchEditing]="true"
            [data]="posts"
            [primaryKey]="'country'"
            (cellEditDone)="cellEditDoneHandler($event)">
<igx-column width="200px" field="town" dataType="string" header="Town" [resizable]="true" [editable]="true" [sortable]="true" [movable]="true" [cellClasses]="beatsPerMinuteClasses">
  <ng-template igxCell let-cell="cell" let-val>
    <igx-select #townSelect
                placeholder="Select town..."
                [overlaySettings]="overlaySettings"
                 [(ngModel)]="town">

      <igx-select-item *ngFor="let item of fruits" [value]="item" 
                (click)="selectCountry(cell.id.rowID, item)" >
        {{ item }}
      </igx-select-item>
    </igx-select>
  </ng-template>
</igx-column>

Here is my typescript:

public selected = "null";

  public selectCountry(rowid:any,item: any) {   
    for (let i = 0; i < this.posts.length; i++) {
      if (this.posts[i].country == rowid) {

        const editTransaction1: Transaction = {
          id: this.posts[i].country,
          type: TransactionType.UPDATE,
          newValue: { town: item + "" }
        };

        this.grid1.transactions.add(editTransaction1, this.posts[i])
      }
    }
  }

  public fruits: string[] = ['Apple', 'Orange', 'Banana'];

  public getCountryValues(cell: IgxGridCellComponent) {
    if (cell) {
      return this.fruits;
    }

    return [];
  }



I am using ignite ui version 12.1.4.