This is a migrated thread and some comments may be shown as answers.

Kendo Grid Template Dropdowns Not holding value when in edit mode

2 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dalton
Top achievements
Rank 1
Dalton asked on 20 Feb 2017, 09:30 PM

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>

2 Answers, 1 is accepted

Sort by
0
Dalton
Top achievements
Rank 1
answered on 20 Feb 2017, 09:34 PM

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>

0
Dalton
Top achievements
Rank 1
answered on 20 Feb 2017, 10:02 PM
Nevermind we solved this problem. It was a problem with the dropdowns reading observables. 
Tags
Grid
Asked by
Dalton
Top achievements
Rank 1
Answers by
Dalton
Top achievements
Rank 1
Share this question
or