fix(igx-grid): row selection and summaries #812

IgniteUI · Apr 16, 2018 · 18e93b5 · 18e93b5
1 parent 3a62445
commit 18e93b5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/src/grid/grid-selection.spec.ts b/src/grid/grid-selection.spec.ts
@@ -49,7 +49,8 @@ describe("IgxGrid - Row Selection", () => {
                 GridWithPagingAndSelectionComponent,
                 GridWithSelectionComponent,
                 GridWithSelectionFilteringComponent,
-                GridWithScrollsComponent
+                GridWithScrollsComponent,
+                GridSummaryComponent
             ],
             imports: [
                 BrowserAnimationsModule,
@@ -795,6 +796,14 @@ describe("IgxGrid - Row Selection", () => {
             expect(headerCheckboxElement.getAttribute("aria-label")).toMatch("Select all");
         });
     }));
+
+    fit("Summaries integration", () => {
+        const fixture = TestBed.createComponent(GridSummaryComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.gridSummaries;
+        expect(grid.summariesMargin).toBe(grid.calcRowCheckboxWidth);
+    });
 });
 
 @Component({
@@ -1011,3 +1020,38 @@ export class GridWithScrollsComponent implements OnInit {
         column.width = "50px";
     }
 }
+
+@Component({
+    template: `
+        <igx-grid #grid1 [data]="data" [rowSelectable]="true">
+            <igx-column field="ProductID" header="Product ID">
+            </igx-column>
+            <igx-column field="ProductName" [hasSummary]="true">
+            </igx-column>
+            <igx-column field="InStock" [dataType]="'boolean'" [hasSummary]="true">
+            </igx-column>
+            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true">
+            </igx-column>
+            <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class  GridSummaryComponent {
+
+    public data = [
+        { ProductID: 1, ProductName: "Chai", InStock: true, UnitsInStock: 2760, OrderDate: new Date("2005-03-21") },
+        { ProductID: 2, ProductName: "Aniseed Syrup", InStock: false, UnitsInStock: 198, OrderDate: new Date("2008-01-15") },
+        { ProductID: 3, ProductName: "Chef Antons Cajun Seasoning", InStock: true, UnitsInStock: 52, OrderDate: new Date("2010-11-20") },
+        { ProductID: 4, ProductName: "Grandmas Boysenberry Spread", InStock: false, UnitsInStock: 0, OrderDate: new Date("2007-10-11") },
+        { ProductID: 5, ProductName: "Uncle Bobs Dried Pears", InStock: false, UnitsInStock: 0, OrderDate: new Date("2001-07-27") },
+        { ProductID: 6, ProductName: "Northwoods Cranberry Sauce", InStock: true, UnitsInStock: 1098, OrderDate: new Date("1990-05-17") },
+        { ProductID: 7, ProductName: "Queso Cabrales", InStock: false, UnitsInStock: 0, OrderDate: new Date("2005-03-03") },
+        { ProductID: 8, ProductName: "Tofu", InStock: true, UnitsInStock: 7898, OrderDate: new Date("2017-09-09") },
+        { ProductID: 9, ProductName: "Teatime Chocolate Biscuits", InStock: true, UnitsInStock: 6998, OrderDate: new Date("2025-12-25") },
+        { ProductID: 10, ProductName: "Chocolate", InStock: true, UnitsInStock: 20000, OrderDate: new Date("2018-03-01") }
+    ];
+    @ViewChild("grid1", { read: IgxGridComponent })
+    public gridSummaries: IgxGridComponent;
+
+}
diff --git a/src/grid/grid.component.html b/src/grid/grid.component.html
@@ -48,7 +48,7 @@
 
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.width.px]='calcWidth' #tfoot>
-    <div *ngIf="hasSummarizedColumns" class="igx-grid__tr" role="row">
+    <div *ngIf="hasSummarizedColumns" class="igx-grid__tr" role="row" [style.marginLeft.px]="summariesMargin">
         <ng-container *ngIf="pinnedColumns.length > 0">
             <igx-grid-summary [gridID]="id" *ngFor="let col of pinnedColumns"  [column]="col" [style.min-width.px]="col.width"></igx-grid-summary>
         </ng-container>

diff --git a/src/grid/grid.component.ts b/src/grid/grid.component.ts
@@ -505,6 +505,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
         return this.getUnpinnedWidth();
     }
 
+    get summariesMargin() {
+        return this.rowSelectable ? this.calcRowCheckboxWidth : 0;
+    }
+
     get columns(): IgxColumnComponent[] {
         return this._columns;
     }