|
[index.js]
editTemplateCB(args) {
let isChecked = getValue("Enabled", args);
return (
<div>
<label htmlFor="checked" style={{ padding: "10px 72px 10px 0" }}>
Enabled
</label>
<SwitchComponent
id="checked"
checked={isChecked}
change={this.changeFn.bind(this)}
/>
</div>
);
}
changeFn = e => {
if (this.rowData) {
this.rowData["Enabled"] = e.checked;
}
};
actionBegin(args) {
if (args.requestType === "beginEdit" || args.requestType === "add") {
this.rowData = Object.assign({}, args.rowData);
}
if (args.requestType === "save") {
const Enabled = "Enabled";
args.data[Enabled] = this.rowData[Enabled] ? 1 : 0;
}
}
return (
<div className="control-pane">
<div className="control-section">
<GridComponent
dataSource={myData}
toolbar={this.toolbarOptions}
allowPaging={true}
height={400}
editSettings={this.editSettings}
pageSettings={this.pageSettings}
actionBegin={this.actionBegin.bind(this)}
>
<ColumnsDirective>
<ColumnDirective
field="ID"
headerText="ID"
width="120"
textAlign="Right"
isPrimaryKey={true}
/>
<ColumnDirective
field="Manager"
headerText="Manager"
width="150"
/>
<ColumnDirective
field="Enabled"
headerText="Enabled"
width="120"
textAlign="Right"
editTemplate={this.editTemplateCB.bind(this)}
editType="numericedit"
/>
<ColumnDirective
field="CreatedAt"
headerText="Created At"
editType="datepickeredit"
format="yMd"
width="170"
/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Edit]} />
</GridComponent>
</div>
</div>
); | 
