import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>DataGrid Selection</h2>
<div style="margin-bottom:10px">
<eui-combobox placeholder="Select a Selection Mode"
[data]="selectionOptions"
[(ngModel)]="selectionMode"
[editable]="false"
[panelStyle]="{height:'auto'}"
(valueChange)="selection=null">
</eui-combobox>
</div>
<eui-datagrid style="height:250px"
[data]="data"
[selectionMode]="selectionMode"
[(selection)]="selection">
<eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
<eui-grid-column field="name" title="Name"></eui-grid-column>
<eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column>
<eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column>
<eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column>
<eui-grid-column field="status" title="Status" align="center"></eui-grid-column>
</eui-datagrid>
<p *ngIf="selection">You selected: {{selectionInfo}}</p>
`
})
export class AppComponent {
data = [
{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
];
selectionOptions = [
{value:null,text:'None'},
{value:'single',text:'Single Selection'},
{value:'multiple',text:'Multiple Selection'},
{value:'cell',text:'Cell Selection'},
{value:'multicell',text:'Multiple Cells'}
];
selectionMode = null;
selection = null;
get selectionInfo() {
if (!this.selection){
return null;
}
if (this.selectionMode == 'single'){
return this.selection.itemid;
} else if (this.selectionMode == 'multiple'){
return this.selection.map(row => row.itemid).join(',');
} else if (this.selectionMode == 'cell'){
return this.selection.row[this.selection.column.field];
} else {
return this.selection.map(c => c.row[c.column.field]).join(',');
}
}
}