diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html index 89fbb46e625..630c7833a15 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html @@ -43,11 +43,4 @@ } - - - } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts index 5ed40340e94..bb083e85c48 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -6,7 +6,7 @@ import { BaseFilteringComponent } from './base-filtering.component'; import { NgClass } from '@angular/common'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, OverlaySettings, PlatformUtil, VerticalAlignment } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, IgxOverlayService, OverlaySettings, PlatformUtil, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; /** @@ -15,17 +15,12 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, Horiz @Component({ selector: 'igx-excel-style-conditional-filter', templateUrl: './excel-style-conditional-filter.component.html', - imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent] + imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent] }) export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { public esf = inject(BaseFilteringComponent); protected platform = inject(PlatformUtil); - - /** - * @hidden @internal - */ - @ViewChild('customDialog', { read: IgxExcelStyleCustomDialogComponent }) - public customDialog: IgxExcelStyleCustomDialogComponent; + private _overlayService = inject(IgxOverlayService); /** * @hidden @internal @@ -133,20 +128,41 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { * @hidden @internal */ public onSubMenuSelection(eventArgs: ISelectionEventArgs) { + const positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Center, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Center, + verticalStartPoint: VerticalAlignment.Middle + }; + const overlaySettings: OverlaySettings = { + target: this.esf.grid.tbody.nativeElement, + modal: false, + closeOnOutsideClick: true, + positionStrategy: new AutoPositionStrategy(positionSettings), + scrollStrategy: new AbsoluteScrollStrategy(), + }; + const overlayId = this._overlayService.attach(IgxExcelStyleCustomDialogComponent, this.esf.grid.bodyViewContainerRef, overlaySettings); + const overlayInfo = this._overlayService.getOverlayById(overlayId); + const customDialog = overlayInfo.componentRef!.instance as IgxExcelStyleCustomDialogComponent; + + customDialog.esf = this.esf; + customDialog.column = this.esf.column; + customDialog.filteringService = this.esf.grid.filteringService; + customDialog.overlayComponentId = overlayId; if (this.esf.expressionsList && this.esf.expressionsList.length && - this.esf.expressionsList[0].expression.condition.name !== 'in') { - this.customDialog.expressionsList = this.esf.expressionsList; + this.esf.expressionsList[0].expression.condition?.name !== 'in') { + customDialog.expressionsList = this.esf.expressionsList; } else { - this.customDialog.expressionsList = this.customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition); + customDialog.expressionsList = customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition); } + customDialog.selectedOperator = eventArgs.newSelection.value; - this.customDialog.selectedOperator = eventArgs.newSelection.value; eventArgs.cancel = true; if (this.esf.overlayComponentId) { this.esf.hide(); } this.subMenu.close(); - this.customDialog.open(this.esf.mainDropdown.nativeElement); + this._overlayService.show(overlayId); } /** diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html index 9998443fd1f..30c47aea6aa 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html @@ -1,12 +1,10 @@ -
+ (keydown)="onKeyDown($event)">

{{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts index 0abbe0633f2..e1837de0c1f 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts @@ -1,13 +1,14 @@ -import { Component, Input, ChangeDetectorRef, ViewChild, AfterViewInit, TemplateRef, ViewChildren, QueryList, ElementRef, inject } from '@angular/core'; -import { IgxFilteringService } from '../grid-filtering.service'; -import { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component'; -import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component'; -import { ExpressionUI } from './common'; import { NgClass } from '@angular/common'; -import { BaseFilteringComponent } from './base-filtering.component'; -import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { ChangeDetectorRef, Component, ElementRef, Input, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { ColumnType, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxOverlayService, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil } from 'igniteui-angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, FilteringLogic, GridColumnDataType, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxOverlayService, IgxStringFilteringOperand, IgxTimeFilteringOperand, OverlaySettings, PlatformUtil, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxFilteringService } from '../grid-filtering.service'; +import { BaseFilteringComponent } from './base-filtering.component'; +import { ExpressionUI } from './common'; +import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component'; +import { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component'; /** * @hidden @@ -15,13 +16,31 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, FilteringLogi @Component({ selector: 'igx-excel-style-custom-dialog', templateUrl: './excel-style-custom-dialog.component.html', - imports: [IgxToggleDirective, NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent] + imports: [NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent] }) -export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { +export class IgxExcelStyleCustomDialogComponent { protected overlayService = inject(IgxOverlayService); private cdr = inject(ChangeDetectorRef); protected platform = inject(PlatformUtil); - public esf = inject(BaseFilteringComponent); + public esf?: BaseFilteringComponent; + + constructor() { + this.overlayService.opening.pipe(takeUntilDestroyed()).subscribe((args) => { + if (args.id === this.overlayComponentId) + this.onCustomDialogOpening(); + }); + this.overlayService.opened.pipe(takeUntilDestroyed()).subscribe((args) => { + if (args.id === this.overlayComponentId) + this.onCustomDialogOpened(); + }); + + this.overlayService.closed.pipe(takeUntilDestroyed()).subscribe((args) => { + if (args.id === this.overlayComponentId) { + this.overlayService.detach(this.overlayComponentId); + this.overlayComponentId = null; + } + }); + } @Input() public expressionsList = new Array(); @@ -38,9 +57,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { @Input() public overlayComponentId: string; - @ViewChild('toggle', { read: IgxToggleDirective, static: true }) - public toggle: IgxToggleDirective; - @ViewChild('defaultExpressionTemplate', { read: TemplateRef }) protected defaultExpressionTemplate: TemplateRef; @@ -56,24 +72,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { @ViewChildren(IgxExcelStyleDateExpressionComponent) private expressionDateComponents: QueryList; - private _customDialogPositionSettings: PositionSettings = { - verticalDirection: VerticalAlignment.Middle, - horizontalDirection: HorizontalAlignment.Center, - horizontalStartPoint: HorizontalAlignment.Center, - verticalStartPoint: VerticalAlignment.Middle - }; - - private _customDialogOverlaySettings: OverlaySettings = { - closeOnOutsideClick: true, - modal: false, - positionStrategy: new AutoPositionStrategy(this._customDialogPositionSettings), - scrollStrategy: new AbsoluteScrollStrategy() - }; - - public ngAfterViewInit(): void { - this._customDialogOverlaySettings.outlet = this.grid.outlet; - } - public get template(): TemplateRef { if (this.column.dataType === GridColumnDataType.Date) { return this.dateExpressionTemplate; @@ -98,15 +96,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { } } - public open(esf) { - this._customDialogOverlaySettings.target = - this.overlayComponentId ? - this.grid.rootGrid ? this.grid.rootGrid.nativeElement : this.grid.nativeElement : - esf; - this.toggle.open(this._customDialogOverlaySettings); - this.overlayComponentId = this.toggle.overlayId; - } - public onClearButtonClick() { this.filteringService.clearFilter(this.column.field); this.selectedOperator = null; @@ -117,14 +106,13 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { public closeDialog() { if (this.overlayComponentId) { this.overlayService.hide(this.overlayComponentId); + this.overlayService.detach(this.overlayComponentId); this.overlayComponentId = null; - } else { - this.toggle.close(); } } public cancelDialog() { - this.esf.cancel(); + this.esf?.cancel(); this.closeDialog(); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts index 209e9708d33..2f9491f00df 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts @@ -135,7 +135,9 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { this.expressionUI.expression.condition = this.getCondition(value); this.expressionUI.expression.conditionName = value; - this.focus(); + if (!this.expressionUI.expression.condition.isUnary) { + this.focus(); + } } public getCondition(value: string): IFilteringOperation { 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 d37959ef576..0a20b0bba92 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -1328,6 +1328,10 @@ export abstract class IgxGridBaseDirective implements GridType, @ViewChild('tbody', { static: true }) public tbody: ElementRef; + /** @hidden @internal */ + @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true }) + public bodyViewContainerRef?: ViewContainerRef; + @ViewChild(IgxGridBodyDirective, { static: true, read: ElementRef }) protected tbodyContainer: ElementRef; diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts index cf8e2ecbf43..ff396662bca 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts @@ -4222,6 +4222,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { fix.detectChanges(); // Open excel style custom filtering dialog and verify its size + setElementSize(grid.nativeElement, ɵSize.Large); GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName'); GridFunctions.clickExcelFilterCascadeButton(fix); @@ -7582,7 +7583,7 @@ const verifyExcelCustomFilterSize = (fix: ComponentFixture, expectedSize: const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: ɵSize) => { const outlet = gridNativeElement.querySelector('.igx-grid__outlet'); const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list')); - const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden')); + const visibleDropdown: any = dropdowns[0]; const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item'); dropdownItems.forEach((dropdownItem) => { diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index fc70bcd36e6..b8f5df39515 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -158,6 +158,7 @@
+
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index 474b908931c..de9b91119dd 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -125,6 +125,7 @@ id="right" class="igx-grid__scroll-on-drag-right"> }
+ @if (!this.parent) { } diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html index 5146ff7f016..4454985176e 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html @@ -60,6 +60,7 @@ +
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html index dc35157c946..24efd0482df 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html @@ -117,6 +117,7 @@
+
diff --git a/projects/igniteui-angular/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/test-utils/grid-functions.spec.ts index bf0b8125a4d..de38c8d9171 100644 --- a/projects/igniteui-angular/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/test-utils/grid-functions.spec.ts @@ -1404,7 +1404,7 @@ export class GridFunctions { input.click(); fix.detectChanges(); - const operators = fix.nativeElement.querySelectorAll('.igx-drop-down__list-scroll')[expressionIndex + 1]; + const operators = fix.nativeElement.querySelectorAll('.igx-drop-down__list-scroll')[expressionIndex]; const operator = operators.children[itemIndex].children[0]; operator.click(); tick();