Events
ReportSheet have data entry events that can be bound while report data changing or submitting.
With below events, users can valid all data changes or cancel the operation while data changing, can also get the feedback result of server then show the result in UI.
Open the demo in new window can open the designer
ReportSheet supports below data entry events. You can use the following code to bind the data entry events:
- ReportSheetDataChanging and ReportSheetDataChanged
ReportSheetDataChanging occurs when the report sheet is changing by update, insert or delete. Allows validating or cancellation of the data operation.
ReportSheetDataChanged occurs when the report sheet data has changed by update, insert or delete. Allows submitting data changes to the server.
const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
report.renderMode("Design");
const templateSheet = report.getTemplate();
templateSheet.setTemplateCell(0, 0, {
binding: "Orders[orderId]",
type: "Group",
showCollapseButton: true
});
templateSheet.setTemplateCell(0, 1, {
binding: "Orders[customerId]",
type: "Group",
});
templateSheet.setDataEntrySetting([ {
name: "Write Back Rule 1",
tableName: "Orders",
fields: [
{ dbColumnName: "orderId", formula: "A1", isPrimary: true },
{ dbColumnName: "customerId", formula: "B1" },
],
includeUnmodified: false,
skipRecordWithEmptyValue: false
} ]);
report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanging, (event, args) => {
let { type, row, col, oldValue, newValue } = args;
if (allowChange(oldValue, newValue)) { // user validate this changing operation here.
console.log(`Changing row: ${row}, col: ${col} from ${oldValue} to ${newValue}`);
} else {
args.cancel = true; // user cancel this operation here.
}
});
report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
let changes = report.getChanges(); // user can get all report changes here.
if (needSubmit(changes)) {
report.submit(); // submit changes.
} else {
report.refresh(); // restore report.
}
});
// data entry operations by UI.
report.renderMode("Preview");
report.updateCellValue(0, 1, "test");
report.addRecordAt(1, 0);
report.updateCellValue(2, 0, 111);
report.updateCellValue(2, 1, "test2");
report.deleteRecordAt(3, 0);
- ReportSheetRecordsSubmitting and ReportSheetRecordsSubmitted
ReportSheetRecordsSubmitting occurs before the report sheet submitting changes to server. Allows final validation of all data changes or cancellign the operation.
ReportSheetRecordsSubmitted occurs after the report sheet submitted the changes to server. Allow user to provide UI feedback of the submit results from the server.
const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
report.renderMode("Design");
const templateSheet = report.getTemplate();
templateSheet.setTemplateCell(0, 0, {
binding: "Orders[orderId]",
type: "Group",
showCollapseButton: true
});
templateSheet.setTemplateCell(0, 1, {
binding: "Orders[customerId]",
type: "Group",
});
templateSheet.setDataEntrySetting([ {
name: "Write Back Rule 1",
tableName: "Orders",
fields: [
{ dbColumnName: "orderId", formula: "A1", isPrimary: true },
{ dbColumnName: "customerId", formula: "B1" },
],
includeUnmodified: false,
skipRecordWithEmptyValue: false
} ]);
// For some users want to validate the data before submitting to server. They can use the ReportSheetRecordsSubmitting event.
reportsheet.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitting, (event, args) => {
let changes = args.sheet.getChanges(); // get reportSheet all changes.
for (let change of changes) {
let { records, deleteRecords, rule } = change;
let updateRecordsData = records.map((r) => r.entity), deleteRecordsData = deleteRecords.map((r) => r.entity);
let tableName = rule.tableName;
if (isInvalidData(updateRecordsData, tableName)) { // users validate data.
//cancel the reportsheet submit operation.
args.cancel = true;
break;
}
}
});
// For some users want to customize the submit result callback, they can use the ReportSheetRecordsSubmitted event to get the successed and failed result.
reportsheet.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitted, (event, args) => {
let { updateSuccessRecords, deleteSuccessRecords, updateFailedRecords, deleteFailedRecords } = args;
for (let record of updateFailedRecords) {
for (let fieldKey in record.info) {
if (record.info.hasOwnproperty(fieldKey)) {
let recordDetail = record.info[fieldKey];
if (recordDetail.state === "updated") {
// user console the failed detail info.
console.log(`Updated failed in row: ${recordDetail.row} col: ${recordDetail.col}, oldValue: ${recordDetail.oldValue}, reason is ${record.reason}`);
}
}
}
}
});
// data entry operations by UI.
report.renderMode("Preview");
report.updateCellValue(0, 1, "test");
report.addRecordAt(1, 0);
report.updateCellValue(2, 0, 111);
report.updateCellValue(2, 1, "test2");
report.deleteRecordAt(3, 0);
report.submit();
Feedback
Submit and view feedback for