Kendo Grid Template Dropdowns Not holding value when in edit mode

[Dalton]

We are having a problem when the kendo grid turns into edit mode. We are currently using dropdowns inside the kendoGridEditTemplate. They are not showing the value that was already selected, even though behind the scenes we can see that it is still there. After adding a item into the kendo grid through the normal add process, it saves and shows up correctly with the names showing for each of the columns. But when selecting the edit button for a row, all the values in the dropdowns become blank to the user, but behind the scenes the value is still there. Below is the code. 

 

 

 

The information comes down as    

         locations: Observable<Location[]>; in our typescript

 

 

 

The infomation model :

export class Location {
    Id?: number;

    Name?: string;
    
}

 

The HTML Code

 

<kendo-grid [data]="Information"
    (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
    (save)="saveHandler($event)" (remove)="removeHandler($event)"
    (add)="addHandler($event)" [height]="370">
   <kendo-grid-toolbar>
       <button kendoGridAddCommand class="k-primary" style="width: 200px;height: 40px;">Add</button>
   </kendo-grid-toolbar>
<kendo-grid-column field="Location" title="Location" width="100">
   <template kendoGridEditTemplate let-dataItem="dataItem">
       <select class="form-control" id="Location" [(ngModel)]="dataItem.Location">
           <option *ngFor="let location of locations | async" [selected]="dataItem.Location?.Id == Location.Id" [ngValue]="location">{{location.Name}}</option>
       </select>
   </template>
   <template kendoGridCellTemplate let-dataItem="dataItem">
       {{dataItem.Location ? dataItem.Location.Name : "" }}
   </template>
</kendo-grid-column>
</kendo-grid>

[Dalton]

UPDATED HTML : 

 

<kendo-grid [data]="Information"
    (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
    (save)="saveHandler($event)" (remove)="removeHandler($event)"
    (add)="addHandler($event)" [height]="370">
   <kendo-grid-toolbar>
       <button kendoGridAddCommand class="k-primary" style="width: 200px;height: 40px;">Add</button>
   </kendo-grid-toolbar>
<kendo-grid-column field="Location" title="Location" width="100">
   <template kendoGridEditTemplate let-dataItem="dataItem">
       <select class="form-control" id="Location" [(ngModel)]="dataItem.Location">
           <option *ngFor="let location of locations | async" [selected]="dataItem.Location?.Id == location.Id" [ngValue]="location">{{location.Name}}</option>
       </select>
   </template>
   <template kendoGridCellTemplate let-dataItem="dataItem">
       {{dataItem.Location ? dataItem.Location.Name : "" }}
   </template>
</kendo-grid-column>
</kendo-grid>

[Dalton]

Nevermind we solved this problem. It was a problem with the dropdowns reading observables.