diff --git a/CHANGELOG.md b/CHANGELOG.md index 11655e18eb5..df67fd1f42d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,37 @@ All notable changes for each version of this project will be documented in this file. +## 13.0.0 + +### New Features +- `IgxCsvExporterService`, `IgxExcelExporterService` + - Exporter services are no longer required to be provided in the application since they are now injected on a root level. +- `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent` + - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar. + +### General + +- `IgxDialog` + - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation: + + ```typescript + import { slideInBottom, slideOutTop } from 'igniteui-angular'; + + @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; + public newPositionSettings: PositionSettings = { + openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), + closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} }) + }; + this.alert.positionSettings = this.newPositionSettings; + ``` +- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` + - **Breaking Change** - The following deprecated inputs have been removed + - Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, + `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. + Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. +- `IgxColumnActionsComponent` + - **Breaking Change** - The following input has been removed + - Input `columns`. Use `igxGrid` `columns` input instead. ## 12.2.1 ### New Features diff --git a/README.md b/README.md index a1b26d8ee06..ad12d325d9f 100644 --- a/README.md +++ b/README.md @@ -25,12 +25,10 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts. -### [**Install our VSCode Toolbox extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-toolbox) -![](https://dl.infragistics.com/tools/extensions/angular-toolbox/toolbox.gif) -### [**Install our VSCode tooltip extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-tooltips) -![](https://dl.infragistics.com/tools/extensions/angular-tooltips/tooltip_preview.gif) - -**IMPORTANT** The repository has been renamed from `igniteui-js-blocks` to `igniteui-angular`. Read more on our new [naming convention](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-github-repo-name-changes). +### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/indigo-design/app-builder) +![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif) +### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/indigo-design/app-builder) +![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif) ### Current List of Components Include: diff --git a/ROADMAP.md b/ROADMAP.md index 6187078297f..20508db2ac2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -2,30 +2,49 @@ # Current Milestone -## Milestone 18 (Due by Oct, 2021) +## Milestone 19 (Due by Nov, 2021) -1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675) -2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969) -3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863) -4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516) -5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923) -6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126) +1. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667) +2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) +3. **DONE** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) +4. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103) +5. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481) +6. onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243) +7. IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832) ## Going down the road +# Due in 2021 + 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700) -2. Grid Cell Merging -3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) -4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) -5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) -6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667) -7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103) -8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068) +2. Grid grouping for an unbound field [#10223](https://github.com/IgniteUI/igniteui-angular/issues/10223) +4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205) +5. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176) +6. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981) +7. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068) +8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674) 9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125) 10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064) +11. IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304) +12. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183) +13. Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217) + +# Due in 2022 + +1. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) +2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514) # Previous Milestone +## Milestone 18 (Released October 4th, 2021) + +1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675) +2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969) +3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863) +4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516) +5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923) +6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126) + ## Milestone 17 (Released August 2nd, 2021) 1. **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 1be2b84bd7c..fd992c8b07b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,5 +1,5 @@ pool: - vmImage: 'Ubuntu 16.04' + vmImage: 'ubuntu-latest' steps: - script: npm ci diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts index 94ab36f1cb4..b53ac98a3e5 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxCheckboxComponent } from './checkbox.component'; @@ -22,9 +22,10 @@ describe('IgxCheckbox', () => { CheckboxExternalLabelComponent, CheckboxInvisibleLabelComponent, CheckboxDisabledTransitionsComponent, + CheckboxFormGroupComponent, IgxCheckboxComponent ], - imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] + imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); @@ -34,7 +35,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); const checkbox = fixture.componentInstance.cb; - const nativeCheckbox = fixture.debugElement.query(By.css('input')).nativeElement; + const nativeCheckbox = checkbox.nativeCheckbox.nativeElement; const nativeLabel = checkbox.nativeLabel.nativeElement; const placeholderLabel = fixture.debugElement.query(By.css('.igx-checkbox__label')).nativeElement; @@ -69,7 +70,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); expect(nativeCheckbox.checked).toBe(false); - expect(checkboxInstance.checked).toBe(false); + expect(checkboxInstance.checked).toBe(null); testInstance.subscribed = true; checkboxInstance.name = 'my-checkbox'; @@ -85,6 +86,22 @@ describe('IgxCheckbox', () => { expect(checkboxInstance.name).toEqual('my-checkbox'); })); + it('Initializes with form group', () => { + const fixture = TestBed.createComponent(CheckboxFormGroupComponent); + fixture.detectChanges(); + + const testInstance = fixture.componentInstance; + const checkboxInstance = testInstance.cb; + const form = testInstance.myForm; + + form.setValue({ checkbox: true }); + expect(checkboxInstance.checked).toBe(true); + + form.reset(); + + expect(checkboxInstance.checked).toBe(null); + }); + it('Initializes with external label', () => { const fixture = TestBed.createComponent(CheckboxExternalLabelComponent); const checkboxInstance = fixture.componentInstance.cb; @@ -197,7 +214,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); // Should not update - expect(checkboxInstance.checked).toBe(false); + expect(checkboxInstance.checked).toBe(null); expect(testInstance.subscribed).toBe(false); }); @@ -398,3 +415,14 @@ class CheckboxInvisibleLabelComponent { class CheckboxDisabledTransitionsComponent { @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent; } + +@Component({ + template: `
Form Group
` +}) +class CheckboxFormGroupComponent { + @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent; + + public myForm = this.fb.group({ checkbox: [''] }); + + constructor(private fb: FormBuilder) {} +} diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 1ac0423d94c..38b44020c5a 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -428,9 +428,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide /** @hidden @internal */ public writeValue(value: boolean) { - if (typeof value === 'boolean') { - this._checked = value; - } + this._checked = value; } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index 5984304189d..00167f8686f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -64,14 +64,12 @@ font-size: $igx-icon-font-size; color: --var($theme, 'color'); + div, svg { + display: block; width: inherit; height: inherit; fill: currentColor; - - use { - pointer-events: none; - } } } diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index e6e6d196f5f..7e393815e81 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -345,7 +345,7 @@ describe('Dialog', () => { fix.detectChanges(); dialog.open(); - tick(); + tick(16); fix.detectChanges(); overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0]; diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 772df61db2f..b2d4d201291 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -1,4 +1,3 @@ -import { useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { Component, @@ -22,7 +21,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives'; import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api'; -import { slideInBottom, slideOutTop } from '../animations/slide/index'; +import {fadeIn, fadeOut} from '../animations/fade/index'; import { IgxFocusModule } from '../directives/focus/focus.directive'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; @@ -459,8 +458,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After protected destroy$ = new Subject(); private _positionSettings: PositionSettings = { - openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), - closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } }) + openAnimation: fadeIn, + closeAnimation: fadeOut }; private _overlayDefaultSettings: OverlaySettings; diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index eb47b6319f2..b495b171f69 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -322,7 +322,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (this.navigationService && this.id) { this.navigationService.remove(this.id); } - if (!this.collapsed && this._overlayId) { + if (this._overlayId) { this.overlayService.detach(this._overlayId); } this.unsubscribe(); diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index 8c38e99d453..329c5a5735b 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -193,17 +193,9 @@ Below is the list of all inputs that the developers may set to configure the gri |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. | |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. | |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels.| -|`columnHiding`| boolean | Returns whether the column hiding UI for the `IgxGridComponent` is enabled.| -| `columnHidingTitle`| string | The title to be displayed in the built-in column hiding UI.| -| `columnPinning` | boolean | Returns if the built-in column pinning UI should be shown in the toolbar. | -| `columnPinningTitle` | string | The title to be displayed in the UI of the column pinning.| | `rowHeight` | number | Sets the row height. | | `columnWidth` | string | The default width of the `IgxGridComponent`'s columns. | |`primaryKey`| any | Property that sets the primary key of the `IgxGridComponent`. | -|`hiddenColumnsText`| string | The text to be displayed inside the toggle button for the built-in column hiding UI of the`IgxColumnComponent`. | -|`pinnedColumnsText`| string | the text to be displayed inside the toggle button for the built-in column pinning UI of the`IgxColumnComponent`. | -|`showToolbar`| boolean | Specifies whether the `IgxGridComponent`'s toolbar is shown or hidden.| -|`toolbarTitle`| string | the toolbar's title. | |`exportExcel`| boolean | Returns whether the option for exporting to MS Excel is enabled or disabled. | |`exportCsv`| boolean | Returns whether the option for exporting to CSV is enabled or disabled.| |`exportText`| string | Returns the textual content for the main export button.| diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index c87188c2fd2..a731932ca9d 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -91,12 +91,9 @@ - diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index e6525f760a3..68baeeb6590 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -16,7 +16,6 @@ import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IColumnToggledEventArgs } from '../common/events'; import { IgxGridBaseDirective } from '../grid-base.directive'; -import { DeprecateProperty } from '../../core/deprecateDecorators'; let NEXT_ID = 0; /** @@ -172,27 +171,6 @@ export class IgxColumnActionsComponent implements DoCheck { this._differ = this.differs.find([]).create(this.trackChanges); } - /** - * Gets the grid columns to provide an action for. - * - * @deprecated - * @example - * ```typescript - * let gridColumns = this.columnActions.columns; - * ``` - */ - @DeprecateProperty(`Deprecated. Use 'grid' input instead.`) - @Input() - public get columns() { - return this.grid?.columns; - } - - public set columns(value) { - if (value && value.length > 0) { - this.grid = value[0].grid; - } - } - /** * Gets the prompt that is displayed in the filter input. * diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html index 918d4a09464..56b2d61ad00 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html @@ -162,7 +162,7 @@
- +
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html index 53f40145c0f..ba9f88ac028 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html @@ -8,7 +8,7 @@ filter_list - +
{{translateCondition(condition)}} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index 878b7e8df9a..2a48c59e02a 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -155,6 +155,10 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { return this.column.filters.condition(value); } + public getConditionFriendlyName(name: string): string { + return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name; + } + public onValuesInput(eventArgs) { this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index b10da1a7f36..fbe64f992a1 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -277,9 +277,10 @@ export class IgxFilteringService implements OnDestroy { } } + const emptyFilter = new FilteringExpressionsTree(null, field); const onFilteringEventArgs: IFilteringEventArgs = { owner: this.grid, - filteringExpressions: null, + filteringExpressions: emptyFilter, cancel: false }; this.grid.filtering.emit(onFilteringEventArgs); @@ -292,7 +293,7 @@ export class IgxFilteringService implements OnDestroy { this.clear_filter(field); // Wait for the change detection to update filtered data through the pipes and then emit the event. - requestAnimationFrame(() => this.grid.filteringDone.emit(null)); + requestAnimationFrame(() => this.grid.filteringDone.emit(emptyFilter)); if (field) { const expressions = this.getExpressions(field); diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 91e73a53a5d..23f2587eb75 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -400,7 +400,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -813,7 +813,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Args: { column: any, newValue: boolean } * @example * ```html - * + * * ``` */ @Output() @@ -826,7 +826,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Args: { column: IgxColumnComponent, newValue: boolean } * @example * ```html - * + * * ``` */ @Output() @@ -839,7 +839,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the moved `IgxColumnComponent` object. * @example * ```html - * + * * ``` */ @Output() @@ -852,7 +852,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the source and target `IgxColumnComponent` objects. This event is cancelable. * @example * ```html - * + * * ``` */ @Output() @@ -865,7 +865,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the source and target `IgxColumnComponent` objects. * @example * ```html - * + * * ``` */ @Output() @@ -1567,28 +1567,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } } - /** - * Gets/Sets whether the column hiding UI is enabled. - * - * @deprecated - * @remarks - * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below. - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnHiding` is deprecated.') - @Input() - public get columnHiding() { - return this._columnHiding; - } - - public set columnHiding(value) { - this._columnHiding = value; - this.notifyChanges(); - } - /** * Gets/Sets if the row selectors are hidden. * @@ -1646,7 +1624,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * By default it is set to false. * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1733,7 +1711,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1751,7 +1729,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1839,30 +1817,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message; } - /** - * Gets/Sets the title to be displayed in the built-in column hiding UI. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnHidingTitle` is deprecated') - @Input() - public get columnHidingTitle(): string { - return this._columnHidingTitle; - } - public set columnHidingTitle(v: string) { - this._columnHidingTitle = v; - } - - /** @hidden @internal */ - public get columnHidingTitleInternal(): string { - return this._columnHidingTitle; - } - /** * Gets/Sets the initial pinning configuration. * @@ -1885,51 +1839,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements this._pinning = value; } - - /** - * Gets/Sets if the built-in column pinning UI should be shown in the toolbar. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnPinning` is deprecated') - @Input() - public get columnPinning() { - return this._columnPinning; - } - public set columnPinning(value) { - this._columnPinning = value; - this.notifyChanges(); - } - - /** - * Gets/Sets the title to be displayed in the UI of the column pinning. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnPinningTitle` is deprecated') - @Input() - public get columnPinningTitle(): string { - return this._columnPinningTitle; - } - public set columnPinningTitle(v: string) { - this._columnPinningTitle = v; - } - - /** @hidden @internal */ - public get columnPinningTitleInternal(): string { - return this._columnPinningTitle; - } - /** * Gets/Sets if the filtering is enabled. * @@ -1964,7 +1873,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @Input() @@ -2429,52 +2338,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this.pinnedColumns.filter(col => !col.columnLayout).length; } - /** - * Gets/Sets the text to be displayed inside the toggle button. - * - * @deprecated - * - * @remarks - * Used for the built-in column hiding UI of the`IgxColumnComponent`. - * @example - * ```html - * - * ``` - */ - // @DeprecateProperty('`hiddenColumnsText` is deprecated') - @Input() - public get hiddenColumnsText() { - return this._hiddenColumnsText; - } - - public set hiddenColumnsText(value) { - this._hiddenColumnsText = value; - this.notifyChanges(); - - } - - /** - * Gets/Sets the text to be displayed inside the toggle button. - * - * @deprecated - * - * @remarks - * Used for the built-in column pinning UI of the`IgxColumnComponent`. - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`pinnedColumnsText` is deprecated') - @Input() - public get pinnedColumnsText() { - return this._pinnedColumnsText; - } - public set pinnedColumnsText(value) { - this._pinnedColumnsText = value; - this.notifyChanges(); - } - /** * Gets/Sets whether the grid has batch editing enabled. * When batch editing is enabled, changes are not made directly to the underlying data. @@ -2500,11 +2363,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } } - /** @hidden @internal */ - public get pinnedColumnsTextInternal() { - return this._pinnedColumnsText; - } - /** * Get transactions service for the grid. */ @@ -2535,47 +2393,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this._currencyPositionLeft = i < 1; } - - /** - * Gets/Sets whether the toolbar is shown. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`showToolbar` is deprecated') - @Input() - public get showToolbar(): boolean { - return this._showToolbar; - } - public set showToolbar(newValue: boolean) { - this._showToolbar = newValue; - } - - /** - * Gets/Sets the toolbar's title. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`toolbarTitle` is deprecated') - @Input() - public get toolbarTitle(): string { - return this._toolbarTitle; - } - - public set toolbarTitle(newValue: string) { - this._toolbarTitle = newValue; - this.notifyChanges(); - } - /** * Gets/Sets whether exporting to MS Excel is enabled or disabled. * @@ -2973,14 +2790,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this.verticalScrollContainer.getScrollNativeSize(); } - private _columnPinningTitle: string; - private _columnHidingTitle: string; /* Toolbar related definitions */ - private _showToolbar = false; private _exportExcel = false; private _exportCsv = false; - private _toolbarTitle: string = null; private _exportText: string; private _exportExcelText: string; private _exportCsvText: string; @@ -3017,8 +2830,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private columnListDiffer; private rowListDiffer; - private _hiddenColumnsText = ''; - private _pinnedColumnsText = ''; private _height: string | null = '100%'; private _width: string | null = '100%'; private _rowHeight; @@ -6881,16 +6692,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements const activeEl = this.selectionService.activeElement; if (this.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid') { - const expansionRowIndexes = Array.from(this.expansionStates.keys()); + const expansionRowIndexes = []; + for (const [key, value] of this.expansionStates.entries()) { + if (value) { + expansionRowIndexes.push(key); + } + } if (this.selectionService.selection.size > 0) { if (expansionRowIndexes.length > 0) { for (const [key, value] of this.selectionService.selection.entries()) { let updatedKey = key; expansionRowIndexes.forEach(row => { let rowIndex; - if (row.ID) { + if (!isNaN(row.ID)) { rowIndex = Number(row.ID); - }else { + } else { rowIndex = Number(row); } @@ -6937,7 +6753,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements // eslint-disable-next-line prefer-const for (let [row, set] of selectionMap) { - row = this.paginator ? row + (this.paginator.perPage * this.paginator.page) : row; + row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row; row = isRemote ? row - this.virtualizationState.startIndex : row; if (!source[row] || source[row].detailsData !== undefined) { continue; diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index a6747d11b89..75601ad0abc 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -251,10 +251,16 @@ export class IgxGridNavigationService { } public isDataRow(rowIndex: number, includeSummary = false) { + let curRow: any; + if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { - return false; + curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; + if (!curRow){ + return false; + } + }else { + curRow = this.grid.dataView[rowIndex]; } - const curRow = this.grid.dataView[rowIndex]; return curRow && !this.grid.isGroupByRecord(curRow) && !this.grid.isDetailRecord(curRow) && !curRow.childGridsData && (includeSummary || !curRow.summaries); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts index 99fcd53261d..f557d1fba3e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts @@ -843,10 +843,6 @@ describe('Column Hiding UI #grid', () => { fix = TestBed.createComponent(ColumnHidingTestComponent); fix.detectChanges(); grid = fix.componentInstance.grid; - grid.showToolbar = true; - grid.toolbarTitle = 'Grid Toolbar Title'; - grid.hiddenColumnsText = 'Hidden'; - grid.columnHiding = true; grid.columns[2].hidden = true; fix.componentInstance.showInline = false; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index fc20376a5e1..39ca93a5c88 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -485,9 +485,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { GridFunctions.clickFilterCellChip(fix, columnName); GridFunctions.resetFilterRow(fix); - expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: null }); + const emptyFilter = new FilteringExpressionsTree(null, columnName); + expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: emptyFilter }); expect(grid.filtering.emit).toHaveBeenCalledTimes(2); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); const filterUiRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); @@ -512,9 +513,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { tick(100); fix.detectChanges(); - const args = { owner: grid, cancel: false, filteringExpressions: null }; + const emptyFilter = new FilteringExpressionsTree(null, columnName); + const args = { owner: grid, cancel: false, filteringExpressions: emptyFilter }; expect(grid.filtering.emit).toHaveBeenCalledWith(args); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); })); it('Removing second condition removes the And/Or button', fakeAsync(() => { @@ -826,13 +828,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { spyOn(grid.filtering, 'emit'); spyOn(grid.filteringDone, 'emit'); - grid.filter('ProductName', 'I', IgxStringFilteringOperand.instance().condition('startsWith')); + const columnName = 'ProductName'; + grid.filter(columnName, 'I', IgxStringFilteringOperand.instance().condition('startsWith')); tick(30); fix.detectChanges(); expect(grid.rowList.length).toEqual(2); - const filteringExpressions = grid.filteringExpressionsTree.find('ProductName') as FilteringExpressionsTree; + const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree; const args = { owner: grid, cancel: false, filteringExpressions }; expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filtering.emit).toHaveBeenCalledTimes(1); @@ -849,10 +852,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(grid.rowList.length).toEqual(8); - args.filteringExpressions = null; + const emptyFilter = new FilteringExpressionsTree(null, columnName); + args.filteringExpressions = emptyFilter; expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filtering.emit).toHaveBeenCalledTimes(2); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 3f1f6ee60cb..49d278a5dd4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts @@ -1512,7 +1512,6 @@ describe('IgxGrid - Row Editing #grid', () => { it(`Hiding: Should show correct value when showing the column again`, waitForAsync(async () => { fix.componentInstance.showToolbar = true; - grid.columnHiding = true; fix.detectChanges(); await fix.whenStable(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index a9e7b897326..62be10dab05 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -63,12 +63,6 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { expect($(TOOLBAR_TAG)).toBeNull(); }); - it('default toolbar title is rendered', () => { - const titleEl = $(TOOLBAR_TITLE_TAG); - expect(titleEl).toBeInstanceOf(HTMLElement); - expect(titleEl.textContent).toMatch(''); - }); - it('toolbar title can be set through content projection', () => { const newTitle = '1234567890'; fixture.componentInstance.toolbarTitle = newTitle; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index c2abddd55b4..0e473e54b55 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1029,7 +1029,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @param index */ public getRowByIndex(index: number): RowType { - if (index < 0 || index >= this.dataView.length) { + if (index < 0) { return undefined; } return this.createRow(index); @@ -1140,8 +1140,16 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public createRow(index: number, data?: any): RowType { let row: RowType; + let rec: any; - const rec: any = data ?? this.dataView[index]; + if (index < 0 || index >= this.dataView.length) { + if (index >= this.dataView.length){ + const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex; + rec = data ?? this.dataView[virtIndex]; + } + }else { + rec = data ?? this.dataView[index]; + } if (rec && this.isGroupByRecord(rec)) { row = new IgxGroupByRow(this, index, rec); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 603df03990c..3cf6b8eea95 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -3,7 +3,7 @@ import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testin import { configureTestSuite } from '../../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; -import { UIInteractions, wait, waitForActiveNodeChange} from '../../test-utils/ui-interactions.spec'; +import { UIInteractions, wait, waitForActiveNodeChange } from '../../test-utils/ui-interactions.spec'; import { IgxGridModule } from './public_api'; import { IgxGridComponent } from './grid.component'; import { IgxGridRowComponent } from './grid-row.component'; @@ -42,7 +42,7 @@ describe('IgxGrid Master Detail #grid', () => { })); describe('Basic', () => { - beforeEach( fakeAsync(() => { + beforeEach(fakeAsync(() => { fix = TestBed.createComponent(DefaultGridMasterDetailComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -689,7 +689,7 @@ describe('IgxGrid Master Detail #grid', () => { describe('Integration', () => { describe('Paging', () => { - it('Should not take into account expanded detail views as additional records.', fakeAsync(() => { + it('Should not take into account expanded detail views as additional records.', fakeAsync(() => { fix = TestBed.createComponent(DefaultGridMasterDetailComponent); grid = fix.componentInstance.grid; fix.detectChanges(); @@ -859,6 +859,48 @@ describe('IgxGrid Master Detail #grid', () => { fix.detectChanges(); expect(grid.getSelectedData()).toEqual(expectedData); })); + + it('getSelectedData should return correct values when there are master details and paging is enabled', fakeAsync(() => { + const range = { rowStart: 0, rowEnd: 5, columnStart: 'ContactName', columnEnd: 'ContactName' }; + const expectedDataFromSecondPage = [ + { ContactName: 'Hanna Moos' }, + { ContactName: 'Frédérique Citeaux' }, + { ContactName: 'Martín Sommer' } + ]; + fix.componentInstance.paging = true; + fix.detectChanges(); + grid.paginator.perPage = 5; + fix.detectChanges(); + tick(16); + grid.paginator.paginate(1); + fix.detectChanges(); + tick(16); + + grid.expandAll(); + tick(100); + fix.detectChanges(); + + grid.selectRange(range); + fix.detectChanges(); + expect(grid.getSelectedData()).toEqual(expectedDataFromSecondPage); + + const expectedDataFromThirdPage = [ + { ContactName: 'Victoria Ashworth' }, + { ContactName: 'Patricio Simpson' }, + { ContactName: 'Francisco Chang' } + ]; + grid.paginator.paginate(2); + fix.detectChanges(); + tick(16); + + grid.expandAll(); + tick(100); + fix.detectChanges(); + + grid.selectRange(range); + fix.detectChanges(); + expect(grid.getSelectedData()).toEqual(expectedDataFromThirdPage); + })); }); describe('Row Selection', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index 6a25e81e02f..db033da8378 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -190,45 +190,45 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('should work with horizontal virtualization when some groups are hidden/shown.', async () => { const uniqueGroups: ColGroupsType[] = [ { - group: 'group1', - hidden: true, - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + hidden: true, + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.colGroups = uniqueGroups; grid.columnWidth = '200px'; @@ -256,7 +256,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(1)).toBe(1 * 200); expect(horizontalVirtualization.getSizeAt(2)).toBe(4 * 200); - // check total widths sum + // check total widths sum let horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total let totalExpected = 7 * 200; @@ -277,7 +277,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(0)).toBe(2 * 200); expect(horizontalVirtualization.getSizeAt(1)).toBe(4 * 200); - // check total widths sum + // check total widths sum horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total totalExpected = 6 * 200; @@ -300,7 +300,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(1)).toBe(2 * 200); expect(horizontalVirtualization.getSizeAt(2)).toBe(4 * 200); - // check total widths sum + // check total widths sum horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total totalExpected = 9 * 200; @@ -315,7 +315,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(lastCell.nativeElement.getBoundingClientRect().right) - .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); + .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); }); @@ -323,7 +323,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { waitForAsync(async () => { // enable toolbar for hiding fixture.componentInstance.showToolbar = true; - grid.columnHiding = true; fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); @@ -343,12 +342,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { // verify checked state expect(checkboxes[0].componentInstance.checked).toBeFalse(); expect(checkboxes[1].componentInstance.checked).toBeTrue(); - })); + })); it(`UI - toggling column checkbox checked state successfully changes the column's hidden state. `, waitForAsync(async () => { // enable toolbar for hiding fixture.componentInstance.showToolbar = true; - grid.columnHiding = true; fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); @@ -547,44 +545,44 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('should work with horizontal virtualization on the unpinned groups.', async () => { const uniqueGroups = [ { - group: 'group1', - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.colGroups = uniqueGroups; fixture.detectChanges(); @@ -638,14 +636,13 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(Math.round(lastCell.nativeElement.getBoundingClientRect().right) - - grid.tbody.nativeElement.getBoundingClientRect().right) - .toBeLessThanOrEqual(2); + grid.tbody.nativeElement.getBoundingClientRect().right) + .toBeLessThanOrEqual(2); }); it('UI - pinned columns count and drop-down items text in pinning toolbar should be correct when group is pinned. ', waitForAsync(async () => { // enable toolbar for pinning - grid.columnPinning = true; fixture.componentInstance.showToolbar = true; fixture.detectChanges(); await fixture.whenStable(); @@ -667,53 +664,52 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { // verify checked state expect(checkboxes[0].componentInstance.checked).toBeTruthy(); expect(checkboxes[1].componentInstance.checked).toBeFalsy(); - })); + })); it(`UI - toggling column checkbox checked state successfully changes the column's pinned state. `, waitForAsync(async () => { const uniqueGroups = [ { - group: 'group1', - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.showToolbar = true; fixture.componentInstance.colGroups = uniqueGroups; - grid.columnPinning = true; grid.columnWidth = '200px'; fixture.componentInstance.grid.width = '1000px'; fixture.detectChanges(); @@ -752,19 +748,19 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { group: 'group1', // total colspan 3 columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } ] }, { group: 'group2', // total colspan 2 columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, width: '50%'}, - { field: 'Address', rowStart: 1, colStart: 2, width: '15%'}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} + { field: 'CompanyName', rowStart: 1, colStart: 1, width: '50%' }, + { field: 'Address', rowStart: 1, colStart: 2, width: '15%' }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } ] } ]; @@ -930,15 +926,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -970,15 +966,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1010,15 +1006,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1050,15 +1046,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1090,15 +1086,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1133,15 +1129,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1213,7 +1209,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { @Component({ template: ` - + + + + + = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 1, colStart: 3}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1}, - { field: 'Country', rowStart: 2, colStart: 2}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1 }, + { field: 'Country', rowStart: 2, colStart: 2 }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; public colGroups: ColGroupsType[] = [ { @@ -1256,7 +1256,11 @@ export class ColumnLayouHidingTestComponent { @Component({ template: ` - + + + + + = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 1, colStart: 3}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1}, - { field: 'Country', rowStart: 2, colStart: 2}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1 }, + { field: 'Country', rowStart: 2, colStart: 2 }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; public colGroups: ColGroupsType[] = [ { @@ -1324,16 +1328,16 @@ export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestC export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestComponent { public showToolbar = false; public cols1: Array = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2, groupable: true}, - { field: 'ContactName', rowStart: 1, colStart: 3, groupable: true}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4, groupable: true}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2, groupable: true }, + { field: 'ContactName', rowStart: 1, colStart: 3, groupable: true }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4, groupable: true }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1, groupable: true}, - { field: 'Country', rowStart: 2, colStart: 2, groupable: true}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1, groupable: true }, + { field: 'Country', rowStart: 2, colStart: 2, groupable: true }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; } @Component({ diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 2296bd32c89..d473e9b3c05 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -593,7 +593,6 @@ describe('Row Drag Tests #grid', () => { }); it('should be able to drag grid row when column hiding is enabled', () => { const hiddenDragCellValue = dragGrid.getCellByColumn(1, 'Downloads').value; - dragGrid.columnHiding = true; const column = dragGrid.getColumnByName('Downloads'); column.hidden = true; diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index d2612e33241..01edca33b93 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -77,7 +77,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -276,8 +276,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(columnsState).columns; @@ -296,8 +296,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columnsStateObject = JSON.parse(columnsState); diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 133e2810414..5d6f935dc85 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -79,6 +79,7 @@ export interface IColumnState { searchable: boolean; columnGroup: boolean; parent: any; + disableHiding: boolean; } export type GridFeatures = keyof IGridStateOptions; @@ -186,7 +187,8 @@ export class IgxGridStateDirective { searchable: c.searchable, selectable: c.selectable, parent: c.parent ? c.parent.header : null, - columnGroup: c.columnGroup + columnGroup: c.columnGroup, + disableHiding: c.disableHiding })); return { columns: gridColumns }; }, diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index ee890445244..36bfb02d009 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -89,7 +89,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('getState should return corect JSON string', () => { pending(); - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -428,10 +428,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]'; - const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]'; + const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; + const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; const initialState = HelperFunctions.buildStateString(grid, 'columns', rootGridColumns, childGridColumns); - const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true}]'; + const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true,"disableHiding":true}]'; const newColumnsState = HelperFunctions.buildStateString(grid, 'columns', newColumns, newColumns); let gridState = state.getState(true, ['columns', 'rowIslands']); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 4b8049fb4f3..6b3c412365a 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -164,8 +164,8 @@ describe('IgxTreeGridState - input properties #tGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; + const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(newColumnsState).columns; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts index 381f6b50ea7..7b3b55d1f75 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts @@ -108,8 +108,8 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { constructor( @Host() protected toolbar: IgxGridToolbarComponent, - @Optional() private excelExporter: IgxExcelExporterService, - @Optional() private csvExporter: IgxCsvExporterService, + private excelExporter: IgxExcelExporterService, + private csvExporter: IgxCsvExporterService, ) { super(toolbar); } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html index 4cc4b000ee8..78aae875f23 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html @@ -3,10 +3,10 @@ name="btnColumnHiding" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity"> {{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }} {{ grid.hiddenColumnsCount }} - {{ grid.hiddenColumnsText }} + {{ buttonText }} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html index ab1516aaaf1..1c220c6e8c6 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html @@ -3,10 +3,10 @@ name="btnColumnPinning" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity"> {{ grid.pinnedColumnsCount }} - {{ grid.pinnedColumnsTextInternal }} + {{ buttonText }} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index 9267835d69f..fa03c11e2e7 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -177,6 +177,9 @@ export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirec @Input() public indentetion = 30; + @Input() + public buttonText: string; + protected columnActionsUI: IgxColumnActionsComponent; public checkAll() { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html index 9f95c94b666..bf0c7c8b223 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html @@ -1,7 +1,6 @@ -{{ grid.toolbarTitle }}
@@ -13,8 +12,6 @@ - - diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts index 76f45a79daa..d82f5e6d724 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts @@ -194,7 +194,6 @@ describe('IgxTreeGrid Component Tests #tGrid', () => { it('should not render rows, paging and headers group when all cols are hidden', fakeAsync(() => { grid.rowSelection = GridSelectionMode.multiple; grid.rowDraggable = true; - grid.showToolbar = true; tick(30); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.html b/projects/igniteui-angular/src/lib/icon/icon.component.html index 665287d1806..09a4d7d7cf1 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.html +++ b/projects/igniteui-angular/src/lib/icon/icon.component.html @@ -5,9 +5,7 @@ - - - +
diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index d3354ebb414..b1f83eb65da 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -3,6 +3,7 @@ import { IgxIconService } from './icon.service'; import { first, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { DeprecateProperty } from '../core/deprecateDecorators'; +import { SafeHtml } from '@angular/platform-browser'; /** * Icon provides a way to include material icons to markup @@ -114,16 +115,19 @@ export class IgxIconComponent implements OnInit, OnDestroy { private destroy$ = new Subject(); - constructor(public el: ElementRef, - private iconService: IgxIconService, - private ref: ChangeDetectorRef) { + constructor( + public el: ElementRef, + private iconService: IgxIconService, + private ref: ChangeDetectorRef, + ) { this.family = this.iconService.defaultFamily; this.iconService.registerFamilyAlias('material', 'material-icons'); - this.iconService.iconLoaded.pipe( - first(e => e.name === this.name && e.family === this.family), - takeUntil(this.destroy$) - ) - .subscribe(() => this.ref.detectChanges()); + this.iconService.iconLoaded + .pipe( + first((e) => e.name === this.name && e.family === this.family), + takeUntil(this.destroy$) + ) + .subscribe(() => this.ref.detectChanges()); } /** @@ -226,21 +230,20 @@ export class IgxIconComponent implements OnInit, OnDestroy { } /** - * An accessor that returns the key of the SVG image. - * The key consists of the font-family and the name separated by underscore. + * An accessor that returns the underlying SVG image as SafeHtml. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { - * let svgKey = this.icon.getSvgKey; + * let svg: SafeHtml = this.icon.getSvg; * } * ``` */ - public get getSvgKey(): string { + public get getSvg(): SafeHtml { if (this.iconService.isSvgIconCached(this.name, this.family)) { - return '#' + this.iconService.getSvgIconKey(this.name, this.family); + return this.iconService.getSvgIcon(this.name, this.family); } return null; diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts index 58e667387e7..89e9cdff673 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts @@ -1,6 +1,5 @@ -import { TestBed } from '@angular/core/testing'; +import { TestBed, fakeAsync } from '@angular/core/testing'; import { IgxIconService } from './icon.service'; -import { DOCUMENT } from '@angular/common'; import { configureTestSuite } from '../test-utils/configure-suite'; import { first } from 'rxjs/operators'; @@ -53,13 +52,11 @@ describe('Icon Service', () => { expect(iconService.familyClassName(ALIAS)).toBe(MY_FONT); }); - it('should add custom svg icon from url', () => { + it('should add custom svg icon from url', fakeAsync((done) => { const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); const name = 'test'; const family = 'svg-icons'; - const iconKey = family + '_' + name; spyOn(XMLHttpRequest.prototype, 'open').and.callThrough(); spyOn(XMLHttpRequest.prototype, 'send'); @@ -69,25 +66,20 @@ describe('Icon Service', () => { expect(XMLHttpRequest.prototype.open).toHaveBeenCalledTimes(1); expect(XMLHttpRequest.prototype.send).toHaveBeenCalledTimes(1); - const svgElement = document.querySelector(`svg[id='${iconKey}']`); - expect(svgElement).toBeDefined(); - }); + iconService.iconLoaded.pipe().subscribe(() => { + expect(iconService.isSvgIconCached(name, family)).toBeTruthy(); + done(); + }); + })); it('should add custom svg icon from text', () => { const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); const name = 'test'; const family = 'svg-icons'; - const iconKey = family + '_' + name; iconService.addSvgIconFromText(name, svgText, family); - expect(iconService.isSvgIconCached(name, family)).toBeTruthy(); - expect(iconService.getSvgIconKey(name, family)).toEqual(iconKey); - - const svgElement = document.querySelector(`svg[id='${iconKey}']`); - expect(svgElement).toBeDefined(); }); it('should emit loading event for a custom svg icon from url', done => { @@ -113,17 +105,4 @@ describe('Icon Service', () => { iconService.addSvgIcon(name, 'test.svg', family); }); - - it('should create svg container inside the body', () => { - const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); - - const name = 'test'; - const family = 'svg-icons'; - - iconService.addSvgIconFromText(name, svgText, family); - - const svgContainer = document.body.querySelector('.igx-svg-container'); - expect(svgContainer).not.toBeNull(); - }); }); diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index 12f5e426d6e..bab19ccea38 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -1,5 +1,5 @@ -import { Injectable, SecurityContext, Inject, OnDestroy, Optional } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; +import { Injectable, SecurityContext, Inject, Optional } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; @@ -32,7 +32,7 @@ export interface IgxIconLoadedEvent { @Injectable({ providedIn: 'root' }) -export class IgxIconService implements OnDestroy { +export class IgxIconService { /** * Observable that emits when an icon is successfully loaded * through a HTTP request. @@ -46,9 +46,9 @@ export class IgxIconService implements OnDestroy { private _family = 'material-icons'; private _familyAliases = new Map(); - private _svgContainer: HTMLElement; - private _cachedSvgIcons: Set = new Set(); + private _cachedSvgIcons = new Map>(); private _iconLoaded = new Subject(); + private _domParser = new DOMParser(); constructor( @Optional() private _sanitizer: DomSanitizer, @@ -58,14 +58,6 @@ export class IgxIconService implements OnDestroy { this.iconLoaded = this._iconLoaded.asObservable(); } - /** - * @hidden - * @internal - */ - public ngOnDestroy(): void { - this.cleanSvgContainer(); - } - /** * Returns the default font-family. * ```typescript @@ -113,7 +105,7 @@ export class IgxIconService implements OnDestroy { * this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); * ``` */ - public addSvgIcon(name: string, url: string, family: string = '') { + public addSvgIcon(name: string, url: string, family = this._family) { if (name && url) { const safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(url); if (!safeUrl) { @@ -162,18 +154,24 @@ export class IgxIconService implements OnDestroy { * ``` */ public isSvgIconCached(name: string, family: string = ''): boolean { - const iconKey = this.getSvgIconKey(name, family); - return this._cachedSvgIcons.has(iconKey); + const familyClassName = this.familyClassName(family); + if(this._cachedSvgIcons.has(familyClassName)) { + const familyRegistry = this._cachedSvgIcons.get(familyClassName) as Map; + return familyRegistry.has(name); + } + + return false; } /** - * Returns the key of a cached SVG image. + * Returns the cached SVG image as string. * ```typescript - * const svgIconKey = this.iconService.getSvgIconKey('aruba', 'svg-flags'); + * const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags'); * ``` */ - public getSvgIconKey(name: string, family: string = '') { - return family + '_' + name; + public getSvgIcon(name: string, family: string = '') { + const familyClassName = this.familyClassName(family); + return this._cachedSvgIcons.get(familyClassName)?.get(name); } /** @@ -184,57 +182,23 @@ export class IgxIconService implements OnDestroy { return req; } - /** - * @hidden - */ - private cleanSvgContainer() { - const container = this._document.documentElement.querySelector('.igx-svg-container'); - - while (container.firstChild) { - container.removeChild(container.firstChild); - } - } - /** * @hidden */ private cacheSvgIcon(name: string, value: string, family: string = '') { if (name && value) { - this.ensureSvgContainerCreated(); + const doc = this._domParser.parseFromString(value, 'image/svg+xml'); + const svg = doc.querySelector('svg') as SVGElement; - const div = this._document.createElement('DIV'); - div.innerHTML = value; - const svg = div.querySelector('svg') as SVGElement; + if (!this._cachedSvgIcons.has(family)) { + this._cachedSvgIcons.set(family, new Map()); + } if (svg) { - const iconKey = this.getSvgIconKey(name, family); - - svg.setAttribute('id', iconKey); svg.setAttribute('fit', ''); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); - svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable. - - if (this.isSvgIconCached(name, family)) { - const oldChild = this._svgContainer.querySelector(`svg[id='${iconKey}']`); - this._svgContainer.removeChild(oldChild); - } - - this._svgContainer.appendChild(svg); - this._cachedSvgIcons.add(iconKey); - } - } - } - - /** - * @hidden - */ - private ensureSvgContainerCreated() { - if (!this._svgContainer) { - this._svgContainer = this._document.documentElement.querySelector('.igx-svg-container'); - if (!this._svgContainer) { - this._svgContainer = this._document.createElement('DIV'); - this._svgContainer.classList.add('igx-svg-container'); - this._document.body.appendChild(this._svgContainer); + const safeSvg = this._sanitizer.bypassSecurityTrustHtml(svg.outerHTML); + this._cachedSvgIcons.get(family).set(name, safeSvg); } } } diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts index 668a1f2e07a..aa5d0c80c5a 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts @@ -31,7 +31,9 @@ export interface ICsvExportEndedEventArgs extends IBaseEventArgs { * this.csvExportService.exportData(this.localData, opt); * ``` */ -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class IgxCsvExporterService extends IgxBaseExporter { /** * This event is emitted when the export process finishes. diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts index d5c974a1de3..97cb16ba76f 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts @@ -39,7 +39,9 @@ const EXCEL_MAX_COLS = 16384; * this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("FileName")); * ``` */ -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class IgxExcelExporterService extends IgxBaseExporter { private static ZIP_OPTIONS = { compression: 'DEFLATE', type: 'base64' } as JSZip.JSZipGeneratorOptions<'base64'>; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index b051f22f9c3..e77bb2c38db 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -51,6 +51,7 @@ const CLASS_OVERLAY_WRAPPER_MODAL = 'igx-overlay__wrapper--modal'; const CLASS_OVERLAY_WRAPPER_FLEX = 'igx-overlay__wrapper--flex'; const CLASS_OVERLAY_MAIN = 'igx-overlay'; const CLASS_SCROLLABLE_DIV = 'scrollableDiv'; +const DEBOUNCE_TIME = 16; // Utility function to get all applied to element css from all sources. const css = (element) => { @@ -258,19 +259,19 @@ describe('igxOverlay', () => { mockFactoryResolver = { resolveComponentFactory: () => ({ create: () => ({ - hostView: '', - location: mockElementRef, - changeDetectorRef: { detectChanges: () => { } }, - destroy: () => { } - }) + hostView: '', + location: mockElementRef, + changeDetectorRef: { detectChanges: () => { } }, + destroy: () => { } }) + }) }; mockApplicationRef = { attachView: () => { }, detachView: () => { } }; mockInjector = {}; mockAnimationBuilder = {}; mockDocument = { body: mockElement, - listeners: { }, + listeners: {}, defaultView: mockElement, // this is used be able to properly invoke rxjs `fromEvent` operator, which, turns out // just adds an event listener to the element and emits accordingly @@ -437,7 +438,7 @@ describe('igxOverlay', () => { fixture.detectChanges(); fixture.componentInstance.buttonElement.nativeElement.click(); - tick(); + tick(DEBOUNCE_TIME); const overlayElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_MAIN)[0] as HTMLElement; @@ -634,8 +635,8 @@ describe('igxOverlay', () => { const bottom = 200; const mockElement = document.createElement('div'); spyOn(mockElement, 'getBoundingClientRect').and.callFake(() => ({ - left, top, width, height, right, bottom - } as DOMRect)); + left, top, width, height, right, bottom + } as DOMRect)); const mockItem = document.createElement('div'); mockElement.append(mockItem); @@ -833,7 +834,7 @@ describe('igxOverlay', () => { SimpleDynamicComponent, { positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) }); overlayInstance.show(id); - tick(); + tick(DEBOUNCE_TIME); let contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; @@ -849,7 +850,7 @@ describe('igxOverlay', () => { getPointSpy.and.callThrough().and.returnValue(rect); window.resizeBy(200, 200); window.dispatchEvent(new Event('resize')); - tick(); + tick(DEBOUNCE_TIME); contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; @@ -869,7 +870,7 @@ describe('igxOverlay', () => { // remove SimpleRefComponent HTML element from the DOM tree fixture.elementRef.nativeElement.parentElement.removeChild(fixture.elementRef.nativeElement); overlay.show(overlay.attach(fixture.elementRef)); - tick(); + tick(DEBOUNCE_TIME); const componentElement = fixture.nativeElement as HTMLElement; expect(componentElement).toBeDefined(); @@ -1390,7 +1391,7 @@ describe('igxOverlay', () => { fixture.detectChanges(); fixture.componentInstance.buttonElement.nativeElement.click(); - tick(); + tick(DEBOUNCE_TIME); fixture.detectChanges(); const wrapperElement = (fixture.nativeElement as HTMLElement) @@ -1488,7 +1489,7 @@ describe('igxOverlay', () => { overlay.show(overlay.attach(SimpleDynamicComponent)); overlay.show(overlay.attach(SimpleDynamicComponent)); - tick(); + tick(DEBOUNCE_TIME); const wrapperElements = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; const wrapperElement1 = wrapperElements[0]; @@ -1532,7 +1533,7 @@ describe('igxOverlay', () => { const overlay = fixture.componentInstance.overlay; overlay.show(overlay.attach(SimpleDynamicComponent)); - tick(); + tick(DEBOUNCE_TIME); fixture.detectChanges(); // overlay container IS NOT a child of the debugElement (attached to body, not app-root) @@ -1660,67 +1661,71 @@ describe('igxOverlay', () => { }); // adding more than one component to show in igx-overlay: - it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', () => { - const fixture = TestBed.createComponent(TopLeftOffsetComponent); - const overlay = fixture.componentInstance.overlay; - const overlaySettings: OverlaySettings = { - positionStrategy: new ConnectedPositioningStrategy() - }; - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - fixture.detectChanges(); + it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', + fakeAsync(() => { + const fixture = TestBed.createComponent(TopLeftOffsetComponent); + const overlay = fixture.componentInstance.overlay; + const overlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy() + }; + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(DEBOUNCE_TIME); + fixture.detectChanges(); - const wrapperElements = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; - const wrapperElement1 = wrapperElements[0]; - const wrapperElement2 = wrapperElements[1]; - const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; - const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; - const componentRect1 = componentElement1.getBoundingClientRect(); - const componentRect2 = componentElement2.getBoundingClientRect(); - expect(componentRect1.left).toEqual(0); - expect(componentRect1.left).toEqual(componentRect2.left); - expect(componentRect1.top).toEqual(0); - expect(componentRect1.top).toEqual(componentRect2.top); - expect(componentRect1.width).toEqual(componentRect2.width); - expect(componentRect1.height).toEqual(componentRect2.height); - }); + const wrapperElements = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; + const wrapperElement1 = wrapperElements[0]; + const wrapperElement2 = wrapperElements[1]; + const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; + const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; + const componentRect1 = componentElement1.getBoundingClientRect(); + const componentRect2 = componentElement2.getBoundingClientRect(); + expect(componentRect1.left).toEqual(0); + expect(componentRect1.left).toEqual(componentRect2.left); + expect(componentRect1.top).toEqual(0); + expect(componentRect1.top).toEqual(componentRect2.top); + expect(componentRect1.width).toEqual(componentRect2.width); + expect(componentRect1.height).toEqual(componentRect2.height); + })); - it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', () => { - const fixture = TestBed.createComponent(TopLeftOffsetComponent); - const x = 200; - const y = 300; + it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', + fakeAsync(() => { + const fixture = TestBed.createComponent(TopLeftOffsetComponent); + const x = 200; + const y = 300; - const overlay = fixture.componentInstance.overlay; - const positionSettings: PositionSettings = { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top, - horizontalStartPoint: HorizontalAlignment.Left, - verticalStartPoint: VerticalAlignment.Bottom, - }; - const overlaySettings: OverlaySettings = { - target: new Point(x, y), - positionStrategy: new ConnectedPositioningStrategy(positionSettings) - }; - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - fixture.detectChanges(); + const overlay = fixture.componentInstance.overlay; + const positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Top, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom, + }; + const overlaySettings: OverlaySettings = { + target: new Point(x, y), + positionStrategy: new ConnectedPositioningStrategy(positionSettings) + }; + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(DEBOUNCE_TIME); + fixture.detectChanges(); - const wrapperElements = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; - const wrapperElement1 = wrapperElements[0]; - const wrapperElement2 = wrapperElements[1]; - const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; - const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; - const componentRect1 = componentElement1.getBoundingClientRect(); - const componentRect2 = componentElement2.getBoundingClientRect(); - expect(componentRect1.left).toEqual(x - componentRect1.width); - expect(componentRect1.left).toEqual(componentRect2.left); - expect(componentRect1.top).toEqual(y - componentRect1.height); - expect(componentRect1.top).toEqual(componentRect2.top); - expect(componentRect1.width).toEqual(componentRect2.width); - expect(componentRect1.height).toEqual(componentRect2.height); - }); + const wrapperElements = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; + const wrapperElement1 = wrapperElements[0]; + const wrapperElement2 = wrapperElements[1]; + const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; + const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; + const componentRect1 = componentElement1.getBoundingClientRect(); + const componentRect2 = componentElement2.getBoundingClientRect(); + expect(componentRect1.left).toEqual(x - componentRect1.width); + expect(componentRect1.left).toEqual(componentRect2.left); + expect(componentRect1.top).toEqual(y - componentRect1.height); + expect(componentRect1.top).toEqual(componentRect2.top); + expect(componentRect1.width).toEqual(componentRect2.width); + expect(componentRect1.height).toEqual(componentRect2.height); + })); it(`Should change the state of the component to closed when reaching threshold and closing scroll strategy is used.`, fakeAsync(() => { @@ -3010,7 +3015,7 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; @@ -3020,7 +3025,7 @@ describe('igxOverlay', () => { tick(); wrapperElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual('hidden'); })); @@ -3032,14 +3037,14 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('Escape', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; @@ -3110,26 +3115,26 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('Enter', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('a', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); @@ -3137,7 +3142,7 @@ describe('igxOverlay', () => { UIInteractions.triggerKeyDownEvtUponElem('Escape', document); tick(); wrapperElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual('hidden'); })); @@ -3206,7 +3211,7 @@ describe('igxOverlay', () => { expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280); fixture.componentInstance.buttonElement.nativeElement.click(); tick(); - const componentElement =(fixture.nativeElement as HTMLElement) + const componentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName('customList')[0] as HTMLElement; expect(componentElement).toBeDefined(); expect(componentElement.style.width).toEqual('100%'); @@ -4019,12 +4024,12 @@ describe('igxOverlay', () => { expect(overlay.closing.emit).toHaveBeenCalledTimes(1); expect(overlay.closed.emit).toHaveBeenCalledTimes(1); expect(overlay.closing.emit) - .toHaveBeenCalledWith({ - id: callId, - componentRef: jasmine.any(ComponentRef) as any, - cancel: false, - event: undefined - }); + .toHaveBeenCalledWith({ + id: callId, + componentRef: jasmine.any(ComponentRef) as any, + cancel: false, + event: undefined + }); overlay.detachAll(); overlaySettings.excludeFromOutsideClick = []; @@ -4040,12 +4045,12 @@ describe('igxOverlay', () => { expect(overlay.closing.emit).toHaveBeenCalledTimes(2); expect(overlay.closed.emit).toHaveBeenCalledTimes(2); expect(overlay.closing.emit) - .toHaveBeenCalledWith({ - id: callId, - componentRef: jasmine.any(ComponentRef) as any, - cancel: false, - event: jasmine.any(Event) as any - }); + .toHaveBeenCalledWith({ + id: callId, + componentRef: jasmine.any(ComponentRef) as any, + cancel: false, + event: jasmine.any(Event) as any + }); })); }); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 36b05b656d6..17e9fc14845 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -111,7 +111,7 @@ export class IgxOverlayService implements OnDestroy { * } * ``` */ - public contentAppended = new EventEmitter(); + public contentAppended = new EventEmitter(); /** * Emitted just before the overlay animation start. @@ -345,7 +345,6 @@ export class IgxOverlayService implements OnDestroy { this.addOutsideClickListener(info); this.addResizeHandler(); this.addCloseOnEscapeListener(info); - this.addModalClasses(info); this.buildAnimationPlayers(info); return info.id; } @@ -645,7 +644,9 @@ export class IgxOverlayService implements OnDestroy { // to eliminate flickering show the element just before animation start info.wrapperElement.style.visibility = 'hidden'; } - this.closed.emit({ id: info.id, componentRef: info.componentRef, event: info.event }); + if (!info.closeAnimationDetaching) { + this.closed.emit({ id: info.id, componentRef: info.componentRef, event: info.event }); + } delete info.event; } @@ -660,15 +661,14 @@ export class IgxOverlayService implements OnDestroy { if (info.componentRef) { this._appRef.detachView(info.componentRef.hostView); info.componentRef.destroy(); + delete info.componentRef; } if (info.hook) { info.hook.parentElement.insertBefore(info.elementRef.nativeElement, info.hook); info.hook.parentElement.removeChild(info.hook); delete info.hook; } - if (info.wrapperElement) { - delete info.wrapperElement; - } + const index = this._overlayInfos.indexOf(info); this._overlayInfos.splice(index, 1); @@ -680,6 +680,22 @@ export class IgxOverlayService implements OnDestroy { } this.removeCloseOnEscapeListener(); } + + // clean all the resources attached to info + delete info.elementRef; + delete info.settings; + delete info.initialSize; + info.openAnimationDetaching = true; + info.openAnimationPlayer?.destroy(); + delete info.openAnimationPlayer; + delete info.openAnimationInnerPlayer; + info.closeAnimationDetaching = true; + info.closeAnimationPlayer?.destroy(); + delete info.closeAnimationPlayer; + delete info.closeAnimationInnerPlayer; + delete info.ngZone; + delete info.wrapperElement; + info = null; } private playOpenAnimation(info: OverlayInfo) { @@ -708,6 +724,7 @@ export class IgxOverlayService implements OnDestroy { // to eliminate flickering show the element just before animation start info.wrapperElement.style.visibility = ''; info.visible = true; + this.addModalClasses(info); info.openAnimationPlayer.play(); } @@ -735,6 +752,7 @@ export class IgxOverlayService implements OnDestroy { this.animationStarting.emit({ id: info.id, animationPlayer: info.closeAnimationPlayer, animationType: 'close' }); info.event = event; + this.removeModalClasses(info); info.closeAnimationPlayer.play(); } @@ -744,9 +762,6 @@ export class IgxOverlayService implements OnDestroy { wrapperElement.style.transitionDuration = '0ms'; return; } - if (animationOptions.type === AnimationMetadataType.AnimateRef) { - animationOptions = (animationOptions as AnimationAnimateRefMetadata).animation; - } if (!animationOptions.options || !animationOptions.options.params) { return; } @@ -883,7 +898,18 @@ export class IgxOverlayService implements OnDestroy { const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement; wrapperElement.classList.remove('igx-overlay__wrapper'); this.applyAnimationParams(wrapperElement, info.settings.positionStrategy.settings.openAnimation); - wrapperElement.classList.add('igx-overlay__wrapper--modal'); + requestAnimationFrame(() => { + wrapperElement.classList.add('igx-overlay__wrapper--modal'); + }); + } + } + + private removeModalClasses(info: OverlayInfo) { + if (info.settings.modal) { + const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement; + this.applyAnimationParams(wrapperElement, info.settings.positionStrategy.settings.closeAnimation); + wrapperElement.classList.remove('igx-overlay__wrapper--modal'); + wrapperElement.classList.add('igx-overlay__wrapper'); } } @@ -914,8 +940,10 @@ export class IgxOverlayService implements OnDestroy { } } - private openAnimationDone(info: OverlayInfo){ - this.opened.emit({ id: info.id, componentRef: info.componentRef }); + private openAnimationDone(info: OverlayInfo) { + if (!info.openAnimationDetaching) { + this.opened.emit({ id: info.id, componentRef: info.componentRef }); + } if (info.openAnimationPlayer) { info.openAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field @@ -930,8 +958,7 @@ export class IgxOverlayService implements OnDestroy { } } - private closeAnimationDone(info: OverlayInfo){ - this.closeDone(info); + private closeAnimationDone(info: OverlayInfo) { if (info.closeAnimationPlayer) { info.closeAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field @@ -945,16 +972,17 @@ export class IgxOverlayService implements OnDestroy { // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.openAnimationPlayer as any)._started = false; } + this.closeDone(info); } private finishAnimations(info: OverlayInfo) { // TODO: should we emit here opened or closed events - if (info.openAnimationPlayer) { + if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) { info.openAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.openAnimationPlayer as any)._started = false; } - if (info.closeAnimationPlayer) { + if (info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted()) { info.closeAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.closeAnimationPlayer as any)._started = false; diff --git a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts index c68a715fedf..d98f6657a6c 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts @@ -147,8 +147,14 @@ export interface OverlayInfo { initialSize?: Size; hook?: HTMLElement; openAnimationPlayer?: AnimationPlayer; - closeAnimationPlayer?: AnimationPlayer; openAnimationInnerPlayer?: any; + // calling animation.destroy in detach fires animation.done. This should not happen + // this is why we should trace if animation ever started + openAnimationDetaching?: boolean; + closeAnimationPlayer?: AnimationPlayer; + // calling animation.destroy in detach fires animation.done. This should not happen + // this is why we should trace if animation ever started + closeAnimationDetaching?: boolean; closeAnimationInnerPlayer?: any; ngZone: NgZone; transformX?: number; diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts index 2b6fe131bc3..faaf9217c65 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxSwitchComponent } from './switch.component'; @@ -19,9 +19,10 @@ describe('IgxSwitch', () => { SwitchDisabledComponent, SwitchExternalLabelComponent, SwitchInvisibleLabelComponent, + SwitchFormGroupComponent, IgxSwitchComponent ], - imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] + imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); @@ -68,7 +69,7 @@ describe('IgxSwitch', () => { fixture.detectChanges(); expect(nativeCheckbox.checked).toBe(false); - expect(switchInstance.checked).toBe(false); + expect(switchInstance.checked).toBe(null); testInstance.subscribed = true; switchInstance.name = 'my-switch'; @@ -79,6 +80,22 @@ describe('IgxSwitch', () => { expect(switchInstance.name).toEqual('my-switch'); }); + it('Initializes with form group', () => { + const fixture = TestBed.createComponent(SwitchFormGroupComponent); + fixture.detectChanges(); + + const testInstance = fixture.componentInstance; + const switchInstance = testInstance.switch; + const form = testInstance.myForm; + + form.setValue({ switch: true }); + expect(switchInstance.checked).toBe(true); + + form.reset(); + + expect(switchInstance.checked).toBe(null); + }); + it('Initializes with external label', () => { const fixture = TestBed.createComponent(SwitchExternalLabelComponent); const switchInstance = fixture.componentInstance.switch; @@ -149,7 +166,7 @@ describe('IgxSwitch', () => { fixture.detectChanges(); // Should not update - expect(switchInstance.checked).toBe(false); + expect(switchInstance.checked).toBe(null); expect(testInstance.subscribed).toBe(false); }); @@ -256,3 +273,14 @@ class SwitchInvisibleLabelComponent { @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent; public label = 'Invisible Label'; } + +@Component({ + template: `
Form Group
` +}) +class SwitchFormGroupComponent { + @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent; + + public myForm = this.fb.group({ switch: [] }); + + constructor(private fb: FormBuilder) {} +} diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.ts b/projects/igniteui-angular/src/lib/switch/switch.component.ts index 6da66babc5f..bb1a1ff1b27 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.ts @@ -337,9 +337,7 @@ export class IgxSwitchComponent implements ControlValueAccessor, EditorProvider * @internal */ public writeValue(value: boolean) { - if (typeof value === 'boolean') { - this._checked = value; - } + this._checked = value; } /** diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index c3d6a200e0e..ce784981de6 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -104,8 +104,7 @@ export class SelectionComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(` [autoGenerate]="true" [showToolbar]="showToolbar" [columnHiding]="columnHiding" - [columnPinning]="columnPinning" [exportExcel]="exportExcel" [exportCsv]="exportCsv"`, + template: GridTemplateStrings.declareGrid(` [autoGenerate]="true" [exportExcel]="exportExcel" [exportCsv]="exportCsv"`, '', '') }) export class GridWithToolbarComponent extends GridWithSizeComponent { @@ -136,9 +135,10 @@ export class GridRowConditionalStylingComponent extends GridWithSizeComponent { } @Component({ template: `
- + ${ GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productHidable, - '', '') } + '' + '' + + '', '') }
` }) export class ColumnHidingTestComponent extends GridWithSizeComponent implements OnInit, AfterViewInit { @@ -185,7 +185,7 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { @Component({ template: `
- + ${GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productFilterable, '' + '' + @@ -236,7 +236,7 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom @Component({ template: `
- + ${ GridTemplateStrings.declareGrid(' #grid [height]="height" ', '', ColumnDefinitions.contactInfoGroupableColumns, '')}
` diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index c822dd4d2d9..35de81a1d9d 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -596,8 +596,9 @@ export class GridFunctions { const ddItems = ddList.nativeElement.children; let i; for (i = 0; i < ddItems.length; i++) { - if (ddItems[i].textContent === cond) { - ddItems[i].click(); + const ddItem = ddItems[i].querySelector('.igx-grid__filtering-dropdown-items span'); + if (ddItem.textContent === cond) { + ddItem.click(); tick(100); return; } diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 8bc084c71e5..6d1184e4996 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -123,7 +123,7 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent { @Component({ template: ` - + + template: ` @@ -1619,7 +1619,11 @@ export class GridCustomSelectorsComponent extends BasicGridComponent implements @Component({ template: ` - + + + + + @@ -2035,7 +2039,7 @@ export class CollapsibleColumnGroupTestComponent { @Component({ template: ` - + @@ -2215,7 +2219,7 @@ export class IgxGridFilteringBindingComponent extends BasicGridComponent impleme @Component({ template: ` - diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index 91615bf7051..6ac92ca045a 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -300,16 +300,16 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit { @Component({ template: ` + [primaryKey]="'ID'" [autoGenerate]="true"> - + - + @@ -321,14 +321,14 @@ export class IgxHierarchicalGridTestCustomToolbarComponent extends IgxHierarchic @Component({ template: ` + [primaryKey]="'ID'" [autoGenerate]="true" [rowEditable]='true'> - + - + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 601603b71fd..628693a8d95 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { - IgxIconModule, IgxBottomNavModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService, + IgxIconModule, IgxBottomNavModule, IgxGridModule, IgxOverlayService, IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService, DisplayDensityToken, DisplayDensity, IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService, IgxButtonGroupModule, @@ -327,9 +327,7 @@ const components = [ HierarchicalRemoteService, GridBaseAPIService, IgxGridHierarchicalPipe, - IgxExcelExporterService, IgxIconService, - IgxCsvExporterService, IgxOverlayService, { provide: DisplayDensityToken, useFactory: () => ({ displayDensity: DisplayDensity.comfortable }) }, { diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index a3c58d2b0fc..2128db469df 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -100,7 +100,7 @@ + [header]="c.header" [dataType]="c.dataType" [pinned]="c.pinned" [disableHiding]="true" [hidden]="c.hidden"> Toolbar
{{ title }} - + Really advanced filtering Transform to Excel 👌 diff --git a/src/app/icon/icon.sample.html b/src/app/icon/icon.sample.html index 3babb750cff..11df8cbd4a9 100644 --- a/src/app/icon/icon.sample.html +++ b/src/app/icon/icon.sample.html @@ -86,6 +86,7 @@

Using SVG Icons

+ diff --git a/src/app/icon/icon.sample.ts b/src/app/icon/icon.sample.ts index 0b2174a9d52..743d15d4b05 100644 --- a/src/app/icon/icon.sample.ts +++ b/src/app/icon/icon.sample.ts @@ -19,5 +19,6 @@ export class IconSampleComponent implements OnInit { this._iconService.addSvgIcon('equals', '/assets/svg/filtering/equals.svg', 'svg-flags'); this._iconService.addSvgIcon('is_empty', '/assets/svg/filtering/is_empty.svg', 'svg-flags'); this._iconService.addSvgIcon('starts_with', '/assets/svg/filtering/starts_with.svg', 'svg-flags'); + this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg'); } } diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index 52ff8001137..83821f588d9 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -122,6 +122,14 @@

Checkbox sample

Brian Vaughan Value + + +
+ Form Group Checkbox + Form Group Switch +
+ + diff --git a/src/app/input/input.sample.ts b/src/app/input/input.sample.ts index e8525f986f9..ef2bde005d8 100644 --- a/src/app/input/input.sample.ts +++ b/src/app/input/input.sample.ts @@ -1,4 +1,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; import { IChangeRadioEventArgs } from 'igniteui-angular'; @Component({ @@ -12,6 +13,11 @@ export class InputSampleComponent { public selected = 'option1'; public airplaneMode = false; + public myForm = this.fb.group({ + checkbox: [], + switch: [] + }); + public user = { comment: '', firstName: 'John', @@ -50,6 +56,8 @@ export class InputSampleComponent { disabled: true }]; + constructor(private fb: FormBuilder) {} + public onClick(event: MouseEvent) { console.log(event); } diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html index fe223423e48..8a61cb89f69 100644 --- a/src/app/overlay/overlay.sample.html +++ b/src/app/overlay/overlay.sample.html @@ -70,6 +70,10 @@ + + + +
diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts index 9f4915991c8..92a323848bb 100644 --- a/src/app/overlay/overlay.sample.ts +++ b/src/app/overlay/overlay.sample.ts @@ -11,7 +11,8 @@ import { NoOpScrollStrategy, ElasticPositionStrategy, IgxDragDirective, - ContainerPositionStrategy + ContainerPositionStrategy, + IAnimationParams } from 'igniteui-angular'; @Component({ @@ -48,6 +49,7 @@ export class OverlaySampleComponent implements OnInit { public closeOnOutsideClick = true; public modal = true; public useOutlet = false; + public animationLength = 300; // in ms private xAddition = 0; private yAddition = 0; @@ -341,6 +343,10 @@ export class OverlaySampleComponent implements OnInit { this.cdr.detectChanges(); this.onChange2(); this._overlaySettings.target = this.button.nativeElement; + (this._overlaySettings.positionStrategy.settings.openAnimation.options.params as IAnimationParams).duration + = `${this.animationLength}ms`; + (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration + = `${this.animationLength}ms`; } this.igxDropDown.toggle(this._overlaySettings); } diff --git a/src/assets/svg/filtering/contains.svg b/src/assets/svg/filtering/contains.svg index a69a25741ca..67ca24a7550 100644 --- a/src/assets/svg/filtering/contains.svg +++ b/src/assets/svg/filtering/contains.svg @@ -1,21 +1,4 @@ - - Icons/filter/contains - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/copy.svg b/src/assets/svg/filtering/copy.svg new file mode 100644 index 00000000000..9837dbd779f --- /dev/null +++ b/src/assets/svg/filtering/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/filtering/does_not_contain.svg b/src/assets/svg/filtering/does_not_contain.svg index 75e0c0a9a2c..ea539ea543e 100644 --- a/src/assets/svg/filtering/does_not_contain.svg +++ b/src/assets/svg/filtering/does_not_contain.svg @@ -1,21 +1,4 @@ - - - Icons/filter/does not contain - Created with Sketch. + - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/does_not_equal.svg b/src/assets/svg/filtering/does_not_equal.svg index 585f8475ac7..3f45e895704 100644 --- a/src/assets/svg/filtering/does_not_equal.svg +++ b/src/assets/svg/filtering/does_not_equal.svg @@ -1,21 +1,4 @@ - - Icons/filter/does not equal - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/ends_with.svg b/src/assets/svg/filtering/ends_with.svg index 6e0ce79bf28..eac2e5e66ba 100644 --- a/src/assets/svg/filtering/ends_with.svg +++ b/src/assets/svg/filtering/ends_with.svg @@ -1,21 +1,4 @@ - - Icons/filter/ends with - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/equals.svg b/src/assets/svg/filtering/equals.svg index 47cf89046e6..6123793ff4b 100644 --- a/src/assets/svg/filtering/equals.svg +++ b/src/assets/svg/filtering/equals.svg @@ -1,21 +1,4 @@ - - Icons/filter/equals - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/is_empty.svg b/src/assets/svg/filtering/is_empty.svg index dd271bcbbd9..5a8e83cb64b 100644 --- a/src/assets/svg/filtering/is_empty.svg +++ b/src/assets/svg/filtering/is_empty.svg @@ -1,21 +1,4 @@ - - Icons/filter/is empty - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/starts_with.svg b/src/assets/svg/filtering/starts_with.svg index c5e44e0b699..317824785a2 100644 --- a/src/assets/svg/filtering/starts_with.svg +++ b/src/assets/svg/filtering/starts_with.svg @@ -1,21 +1,4 @@ - - Icons/filter/starts with - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file +