diff --git a/angular.json b/angular.json index ac823072f0d..b38037a079e 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, @@ -288,11 +293,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" }, @@ -333,8 +346,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" @@ -361,7 +374,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", @@ -375,7 +388,9 @@ "projects/igniteui-angular-elements/src/styles.scss" ], "stylePreprocessorOptions": { - "includePaths": ["node_modules"] + "includePaths": [ + "node_modules" + ] }, "scripts": [] } @@ -507,7 +522,9 @@ "projects/igniteui-angular-performance/src/styles.scss" ], "stylePreprocessorOptions": { - "includePaths": ["node_modules"] + "includePaths": [ + "node_modules" + ] } }, "configurations": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 8155ac8547e..9c3b872bbc5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1375,6 +1375,7 @@ } %igx-grid__tr--merged { + border-bottom: 0; border-block-end: 0; } diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts index 4752e1ce936..d6628e8c3fd 100644 --- a/projects/igniteui-angular/src/lib/grids/row.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts @@ -693,10 +693,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 aa3b8ffe2c8..f64b2e434fe 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 19c7ed681e1..3a54a0ff99d 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, HostBinding, 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'; IgxCellTemplateDirective ] }) -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..9d55eea54cf --- /dev/null +++ b/src/styles/grid-cell-merging-alternate-theme.scss @@ -0,0 +1,11 @@ +@use '../../projects/igniteui-angular/src/lib/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, +);