diff --git a/angular.json b/angular.json index a8157cba8d9..23d5bc334e0 100644 --- a/angular.json +++ b/angular.json @@ -22,7 +22,7 @@ }, "index": "src/index.html", "polyfills": [ - "zone.js" + "zone.js" ], "tsConfig": "src/tsconfig.app.json", "assets": [ @@ -31,7 +31,12 @@ "src/web.config" ], "styles": [ - "src/styles/styles.scss" + "src/styles/styles.scss", + { + "input": "src/styles/grid-cell-merging-alternate-theme.scss", + "bundleName": "grid-cell-merging-alternate-theme", + "inject": false + } ], "scripts": [], "extractLicenses": false, @@ -346,11 +351,19 @@ "projects/igniteui-angular-elements/src/styles.scss" ], "scripts": [ - { "input": "./node_modules/lit-html/lit-html.js", "inject": false }, - { "input": "./node_modules/lit-html/development/directive.js", "inject": false } + { + "input": "./node_modules/lit-html/lit-html.js", + "inject": false + }, + { + "input": "./node_modules/lit-html/development/directive.js", + "inject": false + } ], "stylePreprocessorOptions": { - "includePaths": ["node_modules"] + "includePaths": [ + "node_modules" + ] }, "browser": "projects/igniteui-angular-elements/src/main.ts" }, @@ -382,7 +395,10 @@ ], "outputHashing": "none", "optimization": true, - "externalDependencies": ["lit", "igniteui-i18n-core"] + "externalDependencies": [ + "lit", + "igniteui-i18n-core" + ] }, "development": { "optimization": false, @@ -391,8 +407,8 @@ "namedChunks": true }, "dev-app": { - "browser": "projects/igniteui-angular-elements/src/main.app.ts", - "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json" + "browser": "projects/igniteui-angular-elements/src/main.app.ts", + "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json" } }, "defaultConfiguration": "production" @@ -419,7 +435,7 @@ "builder": "@angular/build:karma", "options": { "main": "projects/igniteui-angular-elements/src/test.ts", - "polyfills": [ + "polyfills": [ "projects/igniteui-angular-elements/src/polyfills.ts" ], "tsConfig": "projects/igniteui-angular-elements/tsconfig.spec.json", @@ -433,7 +449,9 @@ "projects/igniteui-angular-elements/src/styles.scss" ], "stylePreprocessorOptions": { - "includePaths": ["node_modules"] + "includePaths": [ + "node_modules" + ] }, "scripts": [] } @@ -572,7 +590,9 @@ "projects/igniteui-angular-performance/src/styles.scss" ], "stylePreprocessorOptions": { - "includePaths": ["node_modules"] + "includePaths": [ + "node_modules" + ] } }, "configurations": { diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss index 11ee6f623e0..2aec3fcf7dd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss @@ -1372,6 +1372,7 @@ } %igx-grid__tr--merged { + border-bottom: 0; border-block-end: 0; } diff --git a/projects/igniteui-angular/grids/core/src/row.directive.ts b/projects/igniteui-angular/grids/core/src/row.directive.ts index 48688b97d7b..25849a62dd6 100644 --- a/projects/igniteui-angular/grids/core/src/row.directive.ts +++ b/projects/igniteui-angular/grids/core/src/row.directive.ts @@ -696,10 +696,6 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { } const isPinned = this.pinned && !this.disabled; const indexInData = this.grid.isRowPinningToTop && !isPinned ? this.index - this.grid.pinnedRecordsCount : this.index; - if ((this.grid as any)._cdrRequests) { - // recalc size if repaint is requested. - this.grid.verticalScrollContainer.recalcUpdateSizes(); - } const size = this.grid.verticalScrollContainer.getSizeAt(indexInData); return size || this.grid.rowHeight; } diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.html b/src/app/grid-cellMerging/grid-cellMerging.component.html index d5e33acb229..b23ae99b06f 100644 --- a/src/app/grid-cellMerging/grid-cellMerging.component.html +++ b/src/app/grid-cellMerging/grid-cellMerging.component.html @@ -1,5 +1,7 @@

Grid with cell merge

+ +
diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.ts b/src/app/grid-cellMerging/grid-cellMerging.component.ts index de5ddba4e93..0bc7007b807 100644 --- a/src/app/grid-cellMerging/grid-cellMerging.component.ts +++ b/src/app/grid-cellMerging/grid-cellMerging.component.ts @@ -1,4 +1,5 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, OnDestroy, ViewChild, inject, signal } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { DefaultTreeGridMergeStrategy, @@ -56,7 +57,10 @@ import { INVOICE_DATA } from '../shared/invoiceData'; IgxIconButtonDirective ] }) -export class GridCellMergingComponent { +export class GridCellMergingComponent implements OnDestroy { + private readonly document = inject(DOCUMENT); + public themeLoaded = signal(false); + private readonly THEME_LINK_ID = 'grid-cell-merging-alternate-theme'; public hierarchicalData = HIERARCHICAL_DATA.concat(HIERARCHICAL_DATA).concat(HIERARCHICAL_DATA); public treeData = HIERARCHICAL_SAMPLE_DATA; public treeGridMergeStrategy = new ByLevelTreeGridMergeStrategy(); @@ -77,6 +81,25 @@ export class GridCellMergingComponent { this.data = allData; } + public ngOnDestroy(): void { + this.document.getElementById(this.THEME_LINK_ID)?.remove(); + } + + public toggleTheme(): void { + const existing = this.document.getElementById(this.THEME_LINK_ID); + if (existing) { + existing.remove(); + this.themeLoaded.set(false); + } else { + const link = this.document.createElement('link'); + link.rel = 'stylesheet'; + link.href = 'grid-cell-merging-alternate-theme.css'; + link.id = this.THEME_LINK_ID; + this.document.head.appendChild(link); + this.themeLoaded.set(true); + } + } + public toggleStrategy() { if (this.treeGridMergeStrategy instanceof ByLevelTreeGridMergeStrategy) { this.treeGridMergeStrategy = new DefaultTreeGridMergeStrategy(); diff --git a/src/styles/grid-cell-merging-alternate-theme.scss b/src/styles/grid-cell-merging-alternate-theme.scss new file mode 100644 index 00000000000..c3754a5e4fc --- /dev/null +++ b/src/styles/grid-cell-merging-alternate-theme.scss @@ -0,0 +1,11 @@ +@use '../../projects/igniteui-angular/core/src/core/styles/themes' as *; + +@include core(); +@include typography( + $font-family: $material-typeface, + $type-scale: $material-type-scale +); +@include theme( + $schema: $dark-material-schema, + $palette: $dark-material-palette, +);