fix(IgxGrid): Add summary rows to special record types to skip for merge. (#16369)

Author: MayaKirova

projects/igniteui-angular/core/src/data-operations/merge-strategy.ts

@@ -64,7 +64,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
 
             const recData = result[index];
             // if this is active row or some special record type - add and skip merging
-            if (activeRowIndexes.indexOf(index) != -1 || (grid && grid.isDetailRecord(rec) || grid.isGroupByRecord(rec) || grid.isChildGridRecord(rec))) {
+            if (activeRowIndexes.indexOf(index) != -1 || (grid && grid.isDetailRecord(rec) || grid.isGroupByRecord(rec) || grid.isChildGridRecord(rec) || grid.isSummaryRow(rec))) {
                 if (!recData) {
                     result.push(rec);
                 }

projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts

@@ -308,6 +308,27 @@ describe('IgxGrid - Cell merging #grid', () => {
 
         });
 
+        describe('Summaries', () => {
+            it('should merge correctly when summary row is shown.', () => {
+                grid.groupBy({
+                    fieldName: 'ProductName', dir: SortingDirection.Desc,
+                    ignoreCase: false, strategy: DefaultSortingStrategy.instance()
+                });
+                fix.detectChanges();
+
+                const col = grid.getColumnByName('ProductName');
+                col.hasSummary = true;
+                fix.detectChanges();
+
+                GridFunctions.verifyColumnMergedState(grid, col, [
+                    { value: 'NetAdvantage', span: 2 },
+                    { value: 'Ignite UI for JavaScript', span: 3 },
+                    { value: 'Ignite UI for Angular', span: 3 },
+                    { value: null, span: 1 }
+                ]);
+            });
+        });
+
         describe('Master-Detail', () => {
 
             it('should interrupt merge sequence if a master-detail row is expanded.', () => {

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

@@ -50,7 +50,7 @@ <h4 class="sample-title">Grid with cell merge</h4>
             Value: {{val}},Index: {{cell.row.index}}
           </ng-template>
     </igx-column>
-    <igx-column field="ShipCountry" header="Ship Country" [merge]="true" width="200px" sortable="true">
+    <igx-column field="ShipCountry" [groupable]="true" [hasSummary]="true" header="Ship Country" [merge]="true" width="200px" sortable="true">
     </igx-column>
     <igx-column field="OrderDate" header="Order Date" width="200px" [merge]="true" [groupable]="true" [dataType]="'date'" sortable="true">
     </igx-column>
@@ -95,7 +95,7 @@ <h4 class="sample-title">Hierarchical grid with cell merge</h4>
     </igx-column>
     <igx-column field="Title" width="200px" [merge]="true"  [hasSummary]="true">
     </igx-column>
-    <igx-column field="City" width="200px" [merge]="true" editable="true" sortable="true">
+    <igx-column [groupable]="true" [hasSummary]="true" field="City" width="200px" [merge]="true" editable="true" sortable="true">
     </igx-column>
     <igx-row-island [key]="'Orders'" [cellMergeMode]="'always'">
         <igx-column field="CustomerID" width="200px">
@@ -113,7 +113,7 @@ <h4 class="sample-title">Tree grid with cell merge</h4>
 <button (click)="toggleStrategy()">Toggle strategy</button>
 <igx-tree-grid [autoGenerate]="false" [rowSelection]="'single'" [data]="treeData" [cellMergeMode]="'always'" [mergeStrategy]="treeGridMergeStrategy"
 childDataKey="ChildCompanies" primaryKey="ID" [expansionDepth]="1" width="800px" [height]="'550px'">
-<igx-column field="ContactName" width="200px">
+<igx-column field="ContactName" width="200px" [hasSummary]="true">
 </igx-column>
 <igx-column field="ContactTitle" width="200px"></igx-column>
 <igx-column field="Country" width="200px" [merge]="true" sortable="true"></igx-column>