Skip to content

Commit ea70b89

Browse files
ddinchevaddincheva
committed
feat(Grid): change grid template to use external paginator component #9097 
1 parent e1653fc commit ea70b89

File tree

6 files changed

+18
-41
lines changed

6 files changed

+18
-41
lines changed

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

+3-10
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
136136
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
137137
| gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
138-
| gridPaging:page:perPage:id:pipeTrigger
138+
| gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
139139
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
140140
| gridDetails:hasDetails:expansionStates:pipeTrigger
141141
| gridRowPinning:id:false:pipeTrigger
@@ -237,18 +237,11 @@
237237

238238
<div class="igx-grid__footer" #footer>
239239
<ng-content select="igx-grid-footer"></ng-content>
240-
<ng-container *ngIf="paging && totalRecords">
241-
<ng-container
242-
*ngTemplateOutlet="paginationTemplate ? paginationTemplate : defaultPaginator; context: {$implicit: this}">
243-
</ng-container>
240+
<ng-container *ngIf="totalRecords">
241+
<ng-content select="igx-paginator"></ng-content>
244242
</ng-container>
245243
</div>
246244

247-
<ng-template #defaultPaginator>
248-
<igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
249-
</igx-paginator>
250-
</ng-template>
251-
252245
<ng-template #emptyFilteredGrid>
253246
<span class="igx-grid__tbody-message" role="cell">
254247
<span>{{emptyFilteredGridMessage}}</span>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export class IgxGridPagingPipe implements PipeTransform {
100100
constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
101101

102102
public transform(collection: IGroupByResult, page = 0, perPage = 15, id: string, pipeTrigger: number): IGroupByResult {
103-
if (!this.gridAPI.grid.paging || this.gridAPI.grid.pagingMode !== GridPagingMode.Local) {
103+
if (!this.gridAPI.grid.paginator || this.gridAPI.grid.pagingMode !== GridPagingMode.Local) {
104104
return collection;
105105
}
106106
const state = {
@@ -114,8 +114,8 @@ export class IgxGridPagingPipe implements PipeTransform {
114114
data: DataUtil.page(cloneArray(collection.data), state, total),
115115
metadata: DataUtil.page(cloneArray(collection.metadata), state, total)
116116
};
117-
if (this.gridAPI.grid.page !== state.index) {
118-
this.gridAPI.grid.page = state.index;
117+
if (this.gridAPI.grid.paginator && this.gridAPI.grid.paginator.page !== state.index) {
118+
this.gridAPI.grid.paginator.page = state.index;
119119
}
120120
this.gridAPI.grid.pagingState = state;
121121
return result;

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

+3-11
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
| visibleColumns:hasVisibleColumns
125125
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
126126
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
127-
| gridHierarchicalPaging:page:perPage:id:pipeTrigger
127+
| gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
128128
| gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
129129
| gridRowPinning:id:false:pipeTrigger
130130
| gridAddRow:false:pipeTrigger"
@@ -204,19 +204,11 @@
204204

205205
<div class="igx-grid__footer" #footer>
206206
<ng-content select="igx-grid-footer"></ng-content>
207-
<ng-container *ngIf="paging && totalRecords">
208-
<ng-container
209-
*ngTemplateOutlet="paginationTemplate ? paginationTemplate : defaultPaginator; context: {$implicit: this}">
210-
</ng-container>
207+
<ng-container *ngIf="totalRecords">
208+
<ng-content select="igx-paginator"></ng-content>
211209
</ng-container>
212210
</div>
213211

214-
<ng-template #defaultPaginator>
215-
<igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords"
216-
[(perPage)]="perPage">
217-
</igx-paginator>
218-
</ng-template>
219-
220212
<ng-template #emptyFilteredGrid>
221213
<span class="igx-grid__tbody-message">
222214
<span>{{emptyFilteredGridMessage}}</span>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export class IgxGridHierarchicalPagingPipe implements PipeTransform {
6767

6868
public transform(collection: any[], page = 0, perPage = 15, _id: string, _pipeTrigger: number): any[] {
6969

70-
if (!this.gridAPI.grid.paging || this.gridAPI.grid.pagingMode !== GridPagingMode.Local) {
70+
if (!this.gridAPI.grid.paginator || this.gridAPI.grid.pagingMode !== GridPagingMode.Local) {
7171
return collection;
7272
}
7373

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

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<ng-content select="igx-grid-toolbar"></ng-content>
22

33
<div class="igx-grid__thead" role="rowgroup">
4-
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)"
5-
(copy)="copyHandler($event)" [style.width.px]='calcWidth' tabindex="0" (focus)="navigation.focusFirstCell()"
4+
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)"
5+
(copy)="copyHandler($event)" [style.width.px]='calcWidth' tabindex="0" (focus)="navigation.focusFirstCell()"
66
(keydown)="navigation.headerNavigation($event)" #theadRow [attr.aria-activedescendant]="activeDescendant">
77
<div class="igx-grid__tr" [style.width.px]='calcWidth' role="row">
88
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
@@ -65,7 +65,7 @@
6565
</div>
6666

6767
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
68-
<div class="igx-grid__tbody-content" tabindex="0" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
68+
<div class="igx-grid__tbody-content" tabindex="0" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
6969
(onDragStop)="selectionService.dragMode = $event" [attr.aria-activedescendant]="activeDescendant"
7070
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
7171
[style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
@@ -105,7 +105,7 @@
105105
| treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger
106106
| treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger
107107
| treeGridFlattening:expansionDepth:expansionStates:pipeTrigger
108-
| treeGridPaging:page:perPage:pipeTrigger
108+
| treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger
109109
| treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
110110
| gridRowPinning:id:false:pipeTrigger
111111
| gridAddRow:false:pipeTrigger"
@@ -151,7 +151,7 @@
151151
</div>
152152

153153
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
154-
<div tabindex="0" (focus)="navigation.focusFirstCell(false)"
154+
<div tabindex="0" (focus)="navigation.focusFirstCell(false)"
155155
(keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
156156
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
157157
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
@@ -174,19 +174,11 @@
174174

175175
<div class="igx-grid__footer" #footer>
176176
<ng-content select="igx-grid-footer"></ng-content>
177-
<ng-container *ngIf="paging && totalRecords">
178-
<ng-container
179-
*ngTemplateOutlet="paginationTemplate ? paginationTemplate : defaultPaginator; context: {$implicit: this}">
180-
</ng-container>
177+
<ng-container *ngIf="totalRecords">
178+
<ng-content select="igx-paginator"></ng-content>
181179
</ng-container>
182180
</div>
183181

184-
<ng-template #defaultPaginator>
185-
<igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords"
186-
[(perPage)]="perPage">
187-
</igx-paginator>
188-
</ng-template>
189-
190182
<ng-template #emptyFilteredGrid>
191183
<span class="igx-grid__tbody-message">
192184
<span>{{emptyFilteredGridMessage}}</span>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export class IgxTreeGridPagingPipe implements PipeTransform {
239239

240240
public transform(collection: ITreeGridRecord[], page = 0, perPage = 15, _: number): ITreeGridRecord[] {
241241
const grid = this.gridAPI.grid;
242-
if (!grid.paging || grid.pagingMode !== GridPagingMode.Local) {
242+
if (!grid.paginator || grid.pagingMode !== GridPagingMode.Local) {
243243
return collection;
244244
}
245245

0 commit comments

Comments
 (0)