From 02b02943d25b84dab33967de72e81595aa0cf2de Mon Sep 17 00:00:00 2001 From: tishko0 Date: Thu, 29 Jan 2026 14:48:31 +0200 Subject: [PATCH 1/2] feat(transactions): added wrapper for grid for elements --- .../src/app/create-custom-element.ts | 19 +++++ .../transactions-wrapper.ts | 81 +++++++++++++++++++ .../src/public_api.ts | 6 +- 3 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts diff --git a/projects/igniteui-angular-elements/src/app/create-custom-element.ts b/projects/igniteui-angular-elements/src/app/create-custom-element.ts index d63013abd58..092b8cf458e 100644 --- a/projects/igniteui-angular-elements/src/app/create-custom-element.ts +++ b/projects/igniteui-angular-elements/src/app/create-custom-element.ts @@ -4,6 +4,7 @@ import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, I import { ComponentConfig } from './component-config'; import { IgxCustomNgElementStrategyFactory } from './custom-strategy'; import type { IgniteComponent } from '../utils/register'; +import { TransactionsWrapper } from './transactionsWrapper/transactions-wrapper'; export type IgxNgElementConfig = Omit & { registerConfig: ComponentConfig[] }; type IgxElementConstructor = NgElementConstructor & { tagName: string}; @@ -71,6 +72,24 @@ export function createIgxCustomElement(component: Type, config: IgxNgEleme }; } elementCtor.prototype.getFilterFactory = getFilterFactory; + + /** + * transactions methods for flat grid due to missing Transactions service in custom elements + */ + + Object.defineProperty(elementCtor.prototype, 'transactions', { + get() { + if(!this._transactionsWrapper){ + this._transactionsWrapper = new TransactionsWrapper( + () => this.ngElementStrategy.componentRef?.instance, + (func: () => any) => this.ngElementStrategy.runInZone(func) + ); + } + return this._transactionsWrapper; + }, + configurable: true, + enumerable: true, + }); } // assign static `tagName` for register/define: diff --git a/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts b/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts new file mode 100644 index 00000000000..22cf9eac7f1 --- /dev/null +++ b/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts @@ -0,0 +1,81 @@ +import { Transaction, State, TransactionType, StateUpdateEvent, TransactionEventOrigin } from 'igniteui-angular/core'; +import { EventEmitter } from '@angular/core'; +export { Transaction, State, TransactionType, TransactionEventOrigin, StateUpdateEvent }; + +export class TransactionsWrapper { + + constructor( + private getInstance: () => any, + private runInZone: (func: () => any) => any + ){} + + private get service() { + return this.getInstance()?.transactions; + } + + // properties + + public get canUndo(): boolean { + return this.service?.canUndo ?? false; + } + + public get canRedo(): boolean { + return this.service?.canRedo ?? false; + } + + public get enabled(): boolean { + return this.service?.enabled ?? false; + } + + // methods + + public undo(): void{ + this.runInZone(() => this.service?.undo()); + } + + public redo(): void{ + this.runInZone(() => this.service?.redo()); + } + + public commit(data?: any[], id?: any): void{ + const instance = this.getInstance(); + this.runInZone(() => this.service?.commit(data ? data : instance?.data, id)); + } + + public clear(id?: any): void{ + this.runInZone(() => this.service?.clear(id)); + } + + public add(transaction: Transaction, recordRef?: any): void{ + this.runInZone(() => this.service?.add(transaction, recordRef)); + } + + public getTransactionLog(id?: any): Transaction[] { + return this.service?.getTransactionLog(id) ?? []; + } + + public getAggregatedChanges(mergeChanges: boolean): Transaction[] { + return this.service?.getAggregatedChanges(mergeChanges) ?? []; + } + + public getState(id: any, pending?: boolean): State | null { + return this.service?.getState(id, pending) ?? null; + } + + public getAggregatedValue(id: any, mergeChanges: boolean): any { + return this.service?.getAggregatedValue(id, mergeChanges); + } + + public startPending(): void { + this.runInZone(() => this.service?.startPending()); + } + + public endPending(commit: boolean): void { + this.runInZone(() => this.service?.endPending(commit)); + } + + public get onStateUpdate(): EventEmitter | undefined { + return this.service?.onStateUpdate; + } + +} diff --git a/projects/igniteui-angular-elements/src/public_api.ts b/projects/igniteui-angular-elements/src/public_api.ts index 2e32da4515e..766eeea1632 100644 --- a/projects/igniteui-angular-elements/src/public_api.ts +++ b/projects/igniteui-angular-elements/src/public_api.ts @@ -1,5 +1,5 @@ import { registerI18n, setCurrentI18n } from 'igniteui-i18n-core'; -import { ByLevelTreeGridMergeStrategy, ColumnPinningPosition, DefaultMergeStrategy, DefaultTreeGridMergeStrategy, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, NoopSortingStrategy, SortingDirection, VerticalAlignment } from 'igniteui-angular/core'; +import { ByLevelTreeGridMergeStrategy, ColumnPinningPosition, DefaultMergeStrategy, DefaultTreeGridMergeStrategy, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, NoopSortingStrategy, SortingDirection, TransactionType, TransactionEventOrigin, VerticalAlignment } from 'igniteui-angular/core'; import { DropPosition, GridPagingMode, IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IgxSummaryOperand, IgxTimeSummaryOperand, NoopPivotDimensionsStrategy, PivotDimensionType, RowPinningPosition } from 'igniteui-angular/grids/core'; /** Export Public API, TODO: reorganize, Generate all w/ renames? */ @@ -49,4 +49,8 @@ export { // i18n registerI18n, setCurrentI18n, + + // Transactions API + TransactionType, + TransactionEventOrigin } From 88f51559886c023de5955d6c61de170f53203a0d Mon Sep 17 00:00:00 2001 From: tishko0 Date: Fri, 30 Jan 2026 09:28:39 +0200 Subject: [PATCH 2/2] feat(samples): allowed transactions for all but blazor --- .../src/app/create-custom-element.ts | 19 ----- .../transactions-wrapper.ts | 81 ------------------- .../grids/grid/src/grid-base.directive.ts | 2 +- 3 files changed, 1 insertion(+), 101 deletions(-) delete mode 100644 projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts diff --git a/projects/igniteui-angular-elements/src/app/create-custom-element.ts b/projects/igniteui-angular-elements/src/app/create-custom-element.ts index 092b8cf458e..d63013abd58 100644 --- a/projects/igniteui-angular-elements/src/app/create-custom-element.ts +++ b/projects/igniteui-angular-elements/src/app/create-custom-element.ts @@ -4,7 +4,6 @@ import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, I import { ComponentConfig } from './component-config'; import { IgxCustomNgElementStrategyFactory } from './custom-strategy'; import type { IgniteComponent } from '../utils/register'; -import { TransactionsWrapper } from './transactionsWrapper/transactions-wrapper'; export type IgxNgElementConfig = Omit & { registerConfig: ComponentConfig[] }; type IgxElementConstructor = NgElementConstructor & { tagName: string}; @@ -72,24 +71,6 @@ export function createIgxCustomElement(component: Type, config: IgxNgEleme }; } elementCtor.prototype.getFilterFactory = getFilterFactory; - - /** - * transactions methods for flat grid due to missing Transactions service in custom elements - */ - - Object.defineProperty(elementCtor.prototype, 'transactions', { - get() { - if(!this._transactionsWrapper){ - this._transactionsWrapper = new TransactionsWrapper( - () => this.ngElementStrategy.componentRef?.instance, - (func: () => any) => this.ngElementStrategy.runInZone(func) - ); - } - return this._transactionsWrapper; - }, - configurable: true, - enumerable: true, - }); } // assign static `tagName` for register/define: diff --git a/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts b/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts deleted file mode 100644 index 22cf9eac7f1..00000000000 --- a/projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Transaction, State, TransactionType, StateUpdateEvent, TransactionEventOrigin } from 'igniteui-angular/core'; -import { EventEmitter } from '@angular/core'; -export { Transaction, State, TransactionType, TransactionEventOrigin, StateUpdateEvent }; - -export class TransactionsWrapper { - - constructor( - private getInstance: () => any, - private runInZone: (func: () => any) => any - ){} - - private get service() { - return this.getInstance()?.transactions; - } - - // properties - - public get canUndo(): boolean { - return this.service?.canUndo ?? false; - } - - public get canRedo(): boolean { - return this.service?.canRedo ?? false; - } - - public get enabled(): boolean { - return this.service?.enabled ?? false; - } - - // methods - - public undo(): void{ - this.runInZone(() => this.service?.undo()); - } - - public redo(): void{ - this.runInZone(() => this.service?.redo()); - } - - public commit(data?: any[], id?: any): void{ - const instance = this.getInstance(); - this.runInZone(() => this.service?.commit(data ? data : instance?.data, id)); - } - - public clear(id?: any): void{ - this.runInZone(() => this.service?.clear(id)); - } - - public add(transaction: Transaction, recordRef?: any): void{ - this.runInZone(() => this.service?.add(transaction, recordRef)); - } - - public getTransactionLog(id?: any): Transaction[] { - return this.service?.getTransactionLog(id) ?? []; - } - - public getAggregatedChanges(mergeChanges: boolean): Transaction[] { - return this.service?.getAggregatedChanges(mergeChanges) ?? []; - } - - public getState(id: any, pending?: boolean): State | null { - return this.service?.getState(id, pending) ?? null; - } - - public getAggregatedValue(id: any, mergeChanges: boolean): any { - return this.service?.getAggregatedValue(id, mergeChanges); - } - - public startPending(): void { - this.runInZone(() => this.service?.startPending()); - } - - public endPending(commit: boolean): void { - this.runInZone(() => this.service?.endPending(commit)); - } - - public get onStateUpdate(): EventEmitter | undefined { - return this.service?.onStateUpdate; - } - -} diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index ff880dca911..5019ececd7f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -2836,7 +2836,7 @@ export abstract class IgxGridBaseDirective implements GridType, } } - /* blazorSuppress */ + /* csSuppress */ /** * Get transactions service for the grid. */