import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>Row Editing</h2>
<eui-datagrid [data]="data" [clickToEdit]="true" editMode="row" style="height:250px">
<eui-grid-column *ngFor="let col of columns"
[field]="col.field"
[title]="col.title"
[editable]="true">
<ng-container *ngIf="col.editor">
<ng-template *ngIf="col.editor=='numberbox'" euiEditTemplate let-row="row">
<eui-numberbox [(ngModel)]="row[col.field]"></eui-numberbox>
</ng-template>
<ng-template *ngIf="col.editor=='checkbox'" euiEditTemplate let-row="row">
<eui-checkbox [(ngModel)]="row[col.field]" style="width:20px;height:20px"></eui-checkbox>
</ng-template>
</ng-container>
</eui-grid-column>
</eui-datagrid>
`
})
export class AppComponent {
columns = [
{field:'itemid',title:'Item ID'},
{field:'name',title:'Name'},
{field:'listprice',title:'List Price',editor:'numberbox'},
{field:'unitcost',title:'Unit Cost',editor:'numberbox'},
{field:'attr',title:'Attribute'},
{field:'status',title:'Status',editor:'checkbox'}
];
data = [
{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":true,"listprice":36.50,"attr":"Large","itemid":"EST-1"},
{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":true,"listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":true,"listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":true,"listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":true,"listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":true,"listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":true,"listprice":83.50,"attr":"With tail","itemid":"EST-15"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":true,"listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":true,"listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":true,"listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
];
}