Skip to content

Commit 0735803

Browse files
ChronosSFChronosSF
authored
Merge pull request #10124 from IgniteUI/mkirova/pivot-grid
Pivot grid skeleton
2 parents a2eefb4 + 782eabd commit 0735803

22 files changed

+830
-13
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@
228228
$cell-selected-within-text-color: null,
229229
) {
230230
$name: 'igx-grid';
231-
$selector: 'igx-grid, igx-hierarchical-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';
231+
$selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';
232232
$grid-schema: ();
233233

234234
@if map-has-key($schema, $name) {

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { IgxTreeGridRowComponent } from '../tree-grid/tree-grid-row.component';
1313
import { IgxGridRowComponent } from '../grid/grid-row.component';
1414
import { IgxHierarchicalRowComponent } from '../hierarchical-grid/hierarchical-row.component';
1515
import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
16+
import { IgxPivotRowComponent } from '../pivot-grid/pivot-row.component';
1617

1718
interface CSSProp {
1819
[prop: string]: any;
@@ -71,7 +72,7 @@ export class IgxGridCellStylesPipe implements PipeTransform {
7172
}
7273
}
7374

74-
type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalRowComponent;
75+
type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalRowComponent | IgxPivotRowComponent;
7576

7677
/**
7778
* @hidden

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import {
5555
} from '../services/public_api';
5656
import { GridBaseAPIService } from './api.service';
5757
import { IgxGridCellComponent } from './cell.component';
58-
import { ISummaryExpression } from './summaries/grid-summary';
58+
import { IgxSummaryOperand, ISummaryExpression } from './summaries/grid-summary';
5959
import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
6060
import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
6161
import { IgxRowDirective } from './row.directive';
@@ -6081,6 +6081,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
60816081
return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
60826082
}
60836083

6084+
/**
6085+
* @hidden
6086+
*/
6087+
public preventHeaderScroll(args) {
6088+
if (args.target.scrollLeft !== 0) {
6089+
(this.navigation as any).forOfDir().getScroll().scrollLeft = args.target.scrollLeft;
6090+
args.target.scrollLeft = 0;
6091+
}
6092+
}
6093+
60846094
protected beginAddRowForIndex(index: number, asChild: boolean = false) {
60856095
const row: IgxRowDirective<IgxGridBaseDirective & GridType> = index == null ?
60866096
null : this.rowList.find(r => r.index === index);
@@ -6091,6 +6101,51 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
60916101
}
60926102
}
60936103

6104+
protected _createColumn(col) {
6105+
let ref;
6106+
if (col instanceof IgxColumnGroupComponent) {
6107+
ref = this._createColGroupComponent(col);
6108+
} else {
6109+
ref = this._createColComponent(col);
6110+
}
6111+
return ref;
6112+
}
6113+
6114+
protected _createColGroupComponent(col: IgxColumnGroupComponent) {
6115+
const factoryGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
6116+
const ref = this.viewRef.createComponent(factoryGroup, null, this.viewRef.injector);
6117+
ref.changeDetectorRef.detectChanges();
6118+
factoryGroup.inputs.forEach((input) => {
6119+
const propName = input.propName;
6120+
ref.instance[propName] = col[propName];
6121+
});
6122+
if (col.children.length > 0) {
6123+
const newChildren = [];
6124+
col.children.forEach(child => {
6125+
const newCol = this._createColumn(child).instance;
6126+
newCol.parent = ref.instance;
6127+
newChildren.push(newCol);
6128+
});
6129+
ref.instance.children.reset(newChildren);
6130+
ref.instance.children.notifyOnChanges();
6131+
}
6132+
return ref;
6133+
}
6134+
6135+
protected _createColComponent(col) {
6136+
const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
6137+
const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
6138+
factoryColumn.inputs.forEach((input) => {
6139+
const propName = input.propName;
6140+
if (!(col[propName] instanceof IgxSummaryOperand)) {
6141+
ref.instance[propName] = col[propName];
6142+
} else {
6143+
ref.instance[propName] = col[propName].constructor;
6144+
}
6145+
});
6146+
return ref;
6147+
}
6148+
60946149
protected switchTransactionService(val: boolean) {
60956150
if (val) {
60966151
this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -675,13 +675,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
675675
this.notifyChanges(true);
676676
}
677677

678-
public preventHeaderScroll(args) {
679-
if (args.target.scrollLeft !== 0) {
680-
(this.navigation as any).forOfDir().getScroll().scrollLeft = args.target.scrollLeft;
681-
args.target.scrollLeft = 0;
682-
}
683-
}
684-
685678
/**
686679
* Returns if a group is expanded or not.
687680
*

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!-- Toolbar area -->
2+
<ng-content select="igx-grid-toolbar"></ng-content>
3+
4+
<!-- Grid table head row area -->
5+
<igx-pivot-header-row class="igx-grid-thead" tabindex="0"
6+
[grid]="this"
7+
[hasMRL]="hasColumnLayouts"
8+
[density]="displayDensity"
9+
[activeDescendant]="activeDescendant"
10+
[width]="calcWidth"
11+
[pinnedColumnCollection]="pinnedColumns"
12+
[unpinnedColumnCollection]="unpinnedColumns"
13+
(keydown.meta.c)="copyHandler($event)"
14+
(keydown.control.c)="copyHandler($event)"
15+
(copy)="copyHandler($event)"
16+
(keydown)="navigation.headerNavigation($event)"
17+
(scroll)="preventHeaderScroll($event)"
18+
(focus)="navigation.focusFirstCell()"
19+
>
20+
</igx-pivot-header-row>
21+
22+
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
23+
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
24+
(dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
25+
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
26+
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
27+
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length <= 0"
28+
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
29+
class="igx-grid__scroll-on-drag-left"></span>
30+
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length > 0"
31+
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
32+
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
33+
<ng-template igxGridFor let-rowData [igxGridForOf]="data
34+
| gridPivotFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
35+
| gridPivotRow:pivotConfiguration.rows:pivotConfiguration.values"
36+
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
37+
[igxForContainerSize]='calcHeight'
38+
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
39+
#verticalScrollContainer>
40+
<ng-template
41+
[igxTemplateOutlet]='recordTemplate'
42+
[igxTemplateOutletContext]='getContext(rowData, rowIndex)'
43+
(cachedViewLoaded)='cachedViewLoaded($event)'>
44+
</ng-template>
45+
</ng-template>
46+
<ng-template #record_template let-rowIndex="index" let-rowData>
47+
<igx-pivot-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
48+
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
49+
</igx-pivot-row>
50+
</ng-template>
51+
52+
<ng-container *ngTemplateOutlet="template"></ng-container>
53+
<igc-trial-watermark></igc-trial-watermark>
54+
</div>
55+
<div igxToggle #loadingOverlay>
56+
<igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
57+
</igx-circular-bar>
58+
</div>
59+
<span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
60+
id="right" class="igx-grid__scroll-on-drag-right"></span>
61+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
62+
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
63+
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
64+
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
65+
</div>
66+
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
67+
</div>
68+
69+
<div class="igx-grid__addrow-snackbar">
70+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
71+
</div>
72+
73+
<div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
74+
</div>
75+
76+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
77+
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
78+
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
79+
<ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
80+
</ng-template>
81+
</div>
82+
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
83+
</div>
84+
85+
<div class="igx-grid__tfoot" role="rowgroup" #tfoot>
86+
</div>
87+
88+
<div class="igx-grid__footer" #footer>
89+
<ng-content select="igx-grid-footer"></ng-content>
90+
</div>
91+
92+
<ng-template #emptyFilteredGrid>
93+
<span class="igx-grid__tbody-message" role="cell">
94+
<span>{{emptyFilteredGridMessage}}</span>
95+
</span>
96+
</ng-template>
97+
98+
<ng-template #defaultEmptyGrid>
99+
<span class="igx-grid__tbody-message" role="cell">
100+
<span>{{emptyGridMessage}}</span>
101+
</span>
102+
</ng-template>
103+
104+
<ng-template #defaultLoadingGrid>
105+
<div class="igx-grid__loading">
106+
<igx-circular-bar [indeterminate]="true">
107+
</igx-circular-bar>
108+
</div>
109+
</ng-template>
110+
<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
111+
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
112+
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>

0 commit comments

Comments
 (0)