+
+
+
+
+
+ );
+ }
+
+ private gridRef = (r: IgrGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.isUpdatingTransactionState = true;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ }, () => {
+ this.isUpdatingTransactionState = false;
+ });
+ });
+ }
+
+ private paginatorRef = (r: IgrPaginator) => {
+ this.paginator = r;
+ if (this.paginator && this.state.totalRecords > 0) {
+ this.paginator.totalRecords = this.state.totalRecords;
+ }
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private onPageChange = (args: IgrNumberEventArgs) => {
+ // Ignore page changes triggered by transaction state updates
+ if (this.isUpdatingTransactionState) {
+ return;
+ }
+ const newPage = args.detail;
+ // Only load data if page actually changed
+ if (newPage !== this.state.page) {
+ this.setState({ page: newPage });
+ this.loadGridData(newPage, this.state.perPage);
+ }
+ }
+
+ private onPerPageChange = (args: IgrNumberEventArgs) => {
+ const newPerPage = args.detail;
+ this.setState({ perPage: newPerPage, page: 0 });
+ this.loadGridData(0, newPerPage);
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ CategoryID: this.randomInt(1, 10),
+ Discontinued: this.randomInt(1, 10) % 2 === 0,
+ ProductID: this.addProductId++,
+ ProductName: `Product with index ${this.randomInt(0, 20)}`,
+ QuantityPerUnit: `${this.randomInt(1, 10) * 10} pcs.`,
+ ReorderLevel: this.randomInt(10, 20),
+ SupplierID: this.randomInt(1, 20),
+ UnitPrice: this.randomInt(10, 1000),
+ UnitsInStock: this.randomInt(1, 100),
+ UnitsOnOrder: this.randomInt(1, 20)
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/grid/data-batch-editing-actions
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/grid/grid-batch-editing/index.html b/samples/grids/grid/grid-batch-editing/index.html
new file mode 100644
index 0000000000..7ccd41dace
--- /dev/null
+++ b/samples/grids/grid/grid-batch-editing/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private _nwindData: any[] = NwindData;
+ public get nwindData(): any[] {
+ return this._nwindData;
+ }
+
+ private gridRef = (r: IgrGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ // Store unsubscribe function for cleanup
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ });
+ });
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ CategoryID: this.randomInt(1, 10),
+ Discontinued: this.randomInt(1, 10) % 2 === 0,
+ OrderDate: new Date(this.randomInt(2000, 2050),
+ this.randomInt(0, 11), this.randomInt(1, 25))
+ .toISOString().slice(0, 10),
+ ProductID: this.addProductId++,
+ ProductName: `Product with index ${this.randomInt(0, 20)}`,
+ QuantityPerUnit: `${this.randomInt(1, 10) * 10} pcs.`,
+ ReorderLevel: this.randomInt(10, 20),
+ SupplierID: this.randomInt(1, 20),
+ UnitPrice: this.randomInt(10, 1000),
+ UnitsInStock: this.randomInt(1, 100),
+ UnitsOnOrder: this.randomInt(1, 20)
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private gridRef = (r: IgrHierarchicalGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.isUpdatingTransactionState = true;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ }, () => {
+ this.isUpdatingTransactionState = false;
+ });
+ });
+ }
+
+ private paginatorRef = (r: IgrPaginator) => {
+ this.paginator = r;
+ if (this.paginator && this.state.totalRecords > 0) {
+ this.paginator.totalRecords = this.state.totalRecords;
+ }
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private onPageChange = (args: IgrNumberEventArgs) => {
+ // Ignore page changes triggered by transaction state updates
+ if (this.isUpdatingTransactionState) {
+ return;
+ }
+ const newPage = args.detail;
+ // Only load data if page actually changed
+ if (newPage !== this.state.page) {
+ this.setState({ page: newPage });
+ this.loadGridData(newPage, this.state.perPage);
+ }
+ }
+
+ private onPerPageChange = (args: IgrNumberEventArgs) => {
+ const newPerPage = args.detail;
+ this.setState({ perPage: newPerPage, page: 0 });
+ this.loadGridData(0, newPerPage);
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ ID: this.addId++,
+ Artist: `New Artist ${this.randomInt(1, 100)}`,
+ Debut: this.randomInt(1990, 2025),
+ GrammyNominations: this.randomInt(0, 20),
+ GrammyAwards: this.randomInt(0, 10),
+ HasGrammyAward: this.randomInt(0, 1) === 1,
+ Albums: [],
+ Tours: []
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/hierarchical-grid/editing-events
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/grid-batch-editing/index.html b/samples/grids/hierarchical-grid/grid-batch-editing/index.html
new file mode 100644
index 0000000000..7ccd41dace
--- /dev/null
+++ b/samples/grids/hierarchical-grid/grid-batch-editing/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private _singersData: any[] = SingersData;
+ public get singersData(): any[] {
+ return this._singersData;
+ }
+
+ private gridRef = (r: IgrHierarchicalGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ });
+ });
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ ID: this.addId++,
+ Artist: `New Artist ${this.randomInt(1, 100)}`,
+ Debut: this.randomInt(1990, 2025),
+ GrammyNominations: this.randomInt(0, 20),
+ GrammyAwards: this.randomInt(0, 10),
+ HasGrammyAward: this.randomInt(0, 1) === 1,
+ Albums: [],
+ Tours: []
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/tree-grid/editing-events
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/grid-batch-editing-remote/index.html b/samples/grids/tree-grid/grid-batch-editing-remote/index.html
new file mode 100644
index 0000000000..7ccd41dace
--- /dev/null
+++ b/samples/grids/tree-grid/grid-batch-editing-remote/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private gridRef = (r: IgrTreeGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.isUpdatingTransactionState = true;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ }, () => {
+ this.isUpdatingTransactionState = false;
+ });
+ });
+ }
+
+ private paginatorRef = (r: IgrPaginator) => {
+ this.paginator = r;
+ if (this.paginator && this.state.totalRecords > 0) {
+ this.paginator.totalRecords = this.state.totalRecords;
+ }
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private onPageChange = (args: IgrNumberEventArgs) => {
+ // Ignore page changes triggered by transaction state updates
+ if (this.isUpdatingTransactionState) {
+ return;
+ }
+ const newPage = args.detail;
+ // Only load data if page actually changed
+ if (newPage !== this.state.page) {
+ this.setState({ page: newPage });
+ this.loadGridData(newPage, this.state.perPage);
+ }
+ }
+
+ private onPerPageChange = (args: IgrNumberEventArgs) => {
+ const newPerPage = args.detail;
+ this.setState({ perPage: newPerPage, page: 0 });
+ this.loadGridData(0, newPerPage);
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ ID: this.addId++,
+ ParentID: -1,
+ Name: `New Employee ${this.randomInt(1, 100)}`,
+ Title: 'Employee',
+ Age: this.randomInt(20, 60),
+ HireDate: new Date(this.randomInt(2000, 2025),
+ this.randomInt(0, 11), this.randomInt(1, 25))
+ .toISOString().slice(0, 10),
+ Phone: `555-${this.randomInt(1000, 9999)}`,
+ OnPTO: this.randomInt(0, 1) === 1
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/tree-grid/editing-events
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/grid-batch-editing/index.html b/samples/grids/tree-grid/grid-batch-editing/index.html
new file mode 100644
index 0000000000..7ccd41dace
--- /dev/null
+++ b/samples/grids/tree-grid/grid-batch-editing/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private _employeesData: EmployeesNestedTreeData | null = null;
+ public get employeesData(): EmployeesNestedTreeData {
+ if (this._employeesData == null) {
+ this._employeesData = new EmployeesNestedTreeData();
+ }
+ return this._employeesData;
+ }
+
+ private gridRef = (r: IgrTreeGrid) => {
+ if (!r) { return; }
+ this.grid = r;
+ (this.grid as any).batchEditing = true;
+
+ this.stateUpdateSubscription = this.grid.transactions.onStateUpdate.subscribe(() => {
+ if (!this.grid) { return; }
+ const hasChanges = this.grid.transactions.getAggregatedChanges(false).length > 0;
+ this.setState({
+ undoDisabled: !this.grid.transactions.canUndo,
+ redoDisabled: !this.grid.transactions.canRedo,
+ commitDisabled: !hasChanges,
+ discardDisabled: !hasChanges
+ });
+ });
+ }
+
+ private dialogRef = (r: IgrDialog) => {
+ this.dialog = r;
+ }
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ public onAddRow = () => {
+ this.grid?.addRow({
+ ID: this.addId++,
+ ParentID: -1,
+ Name: `New Employee ${this.randomInt(1, 100)}`,
+ Title: 'Employee',
+ Age: this.randomInt(20, 60),
+ HireDate: new Date(this.randomInt(2000, 2025),
+ this.randomInt(0, 11), this.randomInt(1, 25))
+ .toISOString().slice(0, 10),
+ Phone: `555-${this.randomInt(1000, 9999)}`,
+ OnPTO: this.randomInt(0, 1) === 1
+ });
+ }
+
+ public onUndo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.undo();
+ }
+
+ public onRedo = () => {
+ this.grid?.endEdit(true);
+ this.grid?.transactions.redo();
+ }
+
+ public onOpenCommitDialog = () => {
+ if (!this.grid) { return; }
+ this.setState({
+ transactionData: this.grid.transactions.getAggregatedChanges(true)
+ });
+ this.dialog?.show();
+ }
+
+ public onCommit = () => {
+ if (!this.grid) { return; }
+ this.grid.transactions.commit(this.grid.data);
+ this.dialog?.hide();
+ }
+
+ public onDiscard = () => {
+ this.grid?.transactions.clear();
+ this.dialog?.hide();
+ }
+
+ public onCancel = () => {
+ this.dialog?.hide();
+ }
+
+ public deleteRowCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+ const id = e.dataContext.cell.id.rowID;
+ return (
+
+
+
+
+
+
+ Add Row
+
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+ Discard
+
+
+ Commit
+
+
+
+
+ Commit
+
+
+ Discard
+
+
+ Cancel
+
+
+