Merge pull request #14876 from IgniteUI/sstoychev/group-by-update-tit…

…le-172 fix(groupby): using pipetrigger for chip titles too
IgniteUI · Oct 7, 2024 · 0787040 · 0787040
2 parents 8814110 + 5dc3707
commit 0787040
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -2175,6 +2175,28 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(fix.componentInstance.onGroupByRowClick).toHaveBeenCalledWith(fix.componentInstance.groupByRowClick, contextUnselect);
     }));
 
+    it('should update chips state when columns are added/removed', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupByDataMoreColumnsComponent);
+        const cols = fix.componentInstance.columns;
+        fix.componentInstance.columns = [];
+        fix.componentInstance.instance.groupingExpressions = [
+            {
+                dir: SortingDirection.Asc,
+                fieldName: 'A',
+                ignoreCase: false,
+                strategy: DefaultSortingStrategy.instance()
+            }
+        ];
+        fix.detectChanges();
+        const chips = fix.componentInstance.instance.groupArea.chips;
+        let chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('A');
+        fix.componentInstance.columns = cols;
+        fix.detectChanges();
+        chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('AA');
+    }));
+
     // GroupBy Row Formatting
     it('should properly apply formatters, both custom and default ones for the default row value template', fakeAsync(() => {
         const fix = TestBed.createComponent(GroupableGridComponent);
@@ -4103,7 +4125,7 @@ export class CustomTemplateGridComponent extends DataParent {
             [width]='width'
             [height]='height'
             [data]="testData">
-                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.field" [width]="c.width + 'px'">
+                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.header || c.field" [width]="c.width + 'px'">
                 </igx-column>
         </igx-grid>
     `,
@@ -4119,7 +4141,7 @@ export class GroupByDataMoreColumnsComponent extends DataParent {
     public testData = [];
 
     public columns = [
-        { field: 'A', width: 100 },
+        { field: 'A', header: 'AA', width: 100 },
         { field: 'B', width: 100 },
         { field: 'C', width: 100 },
         { field: 'D', width: 100 },

diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html
@@ -2,7 +2,7 @@
     <ng-container *ngFor="let expression of chipExpressions; let last = last;">
         <igx-chip
             [id]="expression.fieldName"
-            [title]="(expression.fieldName | igxGroupByMeta:grid).title"
+            [title]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title"
             [displayDensity]="grid.displayDensity"
             [removable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             [draggable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
@@ -11,7 +11,7 @@
             (remove)="clearGrouping($event.owner.id)"
             (chipClick)="handleClick(expression.fieldName)"
         >
-            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>
+            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>
             <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
         </igx-chip>