fix(grid): Make sure border does not appear when new theme is loaded runtime. (#17029)

Author: MayaKirova

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": {

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;
     }
 

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;
     }

src/app/grid-cellMerging/grid-cellMerging.component.html

@@ -1,5 +1,7 @@
 <h4 class="sample-title">Grid with cell merge</h4>
 
+<button (click)="toggleTheme()">{{ themeLoaded() ? 'Unload Theme CSS' : 'Load Theme CSS' }}</button>
+
 <div class="grid__wrapper">
   <igx-input-group type="search" class="searchInput">
     <igx-prefix>

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();

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,
+);