|
export class BatchEdit extends SampleBase {
constructor() {
. . . . . . . .
this.edParams = { params: { change: this.change, value: 0, min: 0 } };
this.gridData = [{ OrderID: 1001, CustomerName: 'VINET', Quantity: 3, Price: 14.25, Total: 45.5 },
{ OrderID: 1002, CustomerName: 'TOMSP', Quantity: 5, Price: 89.45, Total: 447.25 }
]
function actionBegin(args) {
if (args.requestType == 'save') {
// apply the updated value to the Total field
args.data['Total'] = parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Total').value);
}
}
function change(args) {
this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Total').value = parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Quantity').value) * parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Price').value)
}
}
render() {
return (<div className='control-pane'>
<GridComponent ref={grid => this.gridObj = grid} dataSource={this.gridData} pageSettings={this.pageSettings} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} actionBegin={this.actionBegin}>
<ColumnsDirective>
<ColumnDirective field='Quantity' headerText='Quantity' width='120' format='N' textAlign='Right' editType='numericedit' edit={this.edParams}></ColumnDirective>
<ColumnDirective field='Price' headerText='Price' width='120' format='C2' textAlign='Right' editType='numericedit' edit={this.edParams}></ColumnDirective>
<ColumnDirective field='Total' allowEditing={false} headerText='Total' width='120' format='C2' textAlign='Right' ></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Edit]} />
</GridComponent>
</div>);
}
} | 
