Skip to content

Commit dfe3884

Browse files
kdinevkdinev
authored
Merge pull request #13907 from IgniteUI/dpetev/hgrid-toolbar-template
feat(h-grid): provide injector to simplify child toolbar template setup
2 parents c0ff196 + a080985 commit dfe3884

File tree

9 files changed

+80
-10
lines changed

9 files changed

+80
-10
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,23 @@ All notable changes for each version of this project will be documented in this
1010
- Added new property `toggleNodeOnClick` that determines whether clicking over a node will change its expanded state or not. Set to `false` by default.
1111
- `IgxPivotGrid`
1212
- `IPivotDimension` interface now exposes a property called `displayName` similar to the one in the `IPivotValue` interface. This property is optional and will be displayed inside the chips for rows and columns in the `IgxPivotGrid`. If the `displayName` property is not set, `memberName` will be used as a fallback.
13+
- `IgxHierarchicalGrid`, `IgxGridToolbar`
14+
- The declaration of child layout toolbar templates no longer require explicit grid reference so the following:
15+
```html
16+
<igx-row-island>
17+
<igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
18+
```
19+
can be simplified like:
20+
```html
21+
<igx-row-island>
22+
<igx-grid-toolbar *igxGridToolbar>
23+
```
24+
- With this change the `grid` property of the `IgxGridToolbar` has been deprecated as it's no longer needed and will be removed in a future version.
1325
- New directive - `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`.
1426
- `IgxButton`
1527
- **Behavioral Change** `buttonSelected` event is now emitted not only when a button gets selected, but also when it gets deselected. However, the event is no longer being emitted on initialization. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on `eventArgs.selected` condition.
1628

29+
1730
### General
1831
- `igxButton`:
1932
- **Breaking Change** The `raised` type of the `igxButton` directive has been renamed to `contained`. Automatic migrations are available and will be applied on `ng update`.

‎projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "grid",
6+
"remove": true,
7+
"owner": {
8+
"selector": "igx-grid-toolbar",
9+
"type": "component"
10+
}
11+
}
12+
]
13+
}

‎projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,4 +113,44 @@ describe(`Update to ${version}`, () => {
113113
`
114114
);
115115
});
116+
117+
it('should remove toolbar grid property', async () => {
118+
appTree.create(`/testSrc/appPrefix/component/test.component.html`,
119+
`
120+
<igx-hierarchical-grid #grid1>
121+
<igx-grid-toolbar>
122+
<app-grid-search-box [grid]="grid1"></app-grid-search-box>
123+
</igx-grid-toolbar>
124+
<igx-row-island>
125+
<igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
126+
<igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
127+
<igx-grid-toolbar-actions>
128+
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
129+
</igx-grid-toolbar-actions>
130+
</igx-grid-toolbar>
131+
</igx-row-island>
132+
</igx-hierarchical-grid>
133+
`
134+
);
135+
136+
const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
137+
138+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
139+
`
140+
<igx-hierarchical-grid #grid1>
141+
<igx-grid-toolbar>
142+
<app-grid-search-box [grid]="grid1"></app-grid-search-box>
143+
</igx-grid-toolbar>
144+
<igx-row-island>
145+
<igx-grid-toolbar *igxGridToolbar="let childGrid">
146+
<igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
147+
<igx-grid-toolbar-actions>
148+
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
149+
</igx-grid-toolbar-actions>
150+
</igx-grid-toolbar>
151+
</igx-row-island>
152+
</igx-hierarchical-grid>
153+
`
154+
);
155+
});
116156
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
331331
// Create the child toolbar if the parent island has a toolbar definition
332332
this.gridCreated.pipe(pluck('grid'), takeUntil(this.destroy$)).subscribe(grid => {
333333
grid.rendered$.pipe(first(), filter(() => !!this.islandToolbarTemplate))
334-
.subscribe(() => grid.toolbarOutlet.createEmbeddedView(this.islandToolbarTemplate, { $implicit: grid }));
334+
.subscribe(() => grid.toolbarOutlet.createEmbeddedView(this.islandToolbarTemplate, { $implicit: grid }, { injector: grid.toolbarOutlet.injector }));
335335
grid.rendered$.pipe(first(), filter(() => !!this.islandPaginatorTemplate))
336336
.subscribe(() => {
337337
this.rootGrid.paginatorList.changes.pipe(takeUntil(this.destroy$)).subscribe(() => grid.setUpPaginator());

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes
4747
public showProgress = false;
4848

4949
/**
50+
* @deprecated since version 17.1.0
51+
* No longer required to be set for the Hierarchical Grid child grid template
52+
*
5053
* Gets/sets the grid component for the toolbar component.
5154
*
5255
* @remarks

‎projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { IgxPaginatorDirective } from '../paginator/paginator-interfaces';
3030
</igx-column-group>
3131
<igx-paginator *ngIf="paging"></igx-paginator>
3232
<igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
33-
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
33+
<igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
3434
<igx-column field="ID" [groupable]="true" [hasSummary]='true'>
3535
<ng-template igxHeader let-columnRef="column">
3636
<div>
@@ -104,7 +104,7 @@ export class IgxHierarchicalGridTestBaseComponent {
104104
</igx-column-group>
105105
<igx-paginator *ngIf="paging"></igx-paginator>
106106
<igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
107-
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
107+
<igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
108108
<igx-column field="ID" [groupable]="true" [hasSummary]='true'>
109109
<ng-template igxHeader let-columnRef="column">
110110
<div>
@@ -355,12 +355,12 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
355355
<button type="button" igxButton="contained">Parent Button</button>
356356
</igx-grid-toolbar>
357357
<igx-row-island [key]="'childData1'" #rowIsland1 [primaryKey]="'ID'" [autoGenerate]="true">
358-
<igx-grid-toolbar *igxGridToolbar="let grid" [grid]="grid">
358+
<igx-grid-toolbar *igxGridToolbar>
359359
<button type="button" igxButton="contained">Child 1 Button</button>
360360
</igx-grid-toolbar>
361361
</igx-row-island>
362362
<igx-row-island [key]="'childData2'" #rowIsland2 [primaryKey]="'ID'" [autoGenerate]="true">
363-
<igx-grid-toolbar *igxGridToolbar="let grid" [grid]="grid">
363+
<igx-grid-toolbar *igxGridToolbar>
364364
<button type="button" igxButton="contained">Child2 Button</button>
365365
</igx-grid-toolbar>
366366
</igx-row-island>

‎src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<igx-column field="Country"></igx-column>
1515
<igx-column field="Phone"></igx-column>
1616
<igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
17-
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
17+
<igx-grid-toolbar *igxGridToolbar>
1818
<igx-grid-toolbar-title>Child Toolbar - Level 2</igx-grid-toolbar-title>
1919
<igx-grid-toolbar-actions>
2020
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -26,7 +26,7 @@
2626
<igx-column field="ShipCity"></igx-column>
2727
<igx-column field="ShipAddress"></igx-column>
2828
<igx-row-island #rowIsland2 [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
29-
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
29+
<igx-grid-toolbar *igxGridToolbar>
3030
<igx-grid-toolbar-title>Child Toolbar - Level 3</igx-grid-toolbar-title>
3131
<igx-grid-toolbar-actions>
3232
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

‎src/app/hierarchical-grid/hierarchical-grid.sample.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ <h4 class="sample-title">Sample One</h4>
6767
</igx-excel-style-filter-operations>
6868
</igx-grid-excel-style-filtering>
6969

70-
<igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
71-
<igx-grid-toolbar-title>Child Grid 1</igx-grid-toolbar-title>
70+
<igx-grid-toolbar *igxGridToolbar>
71+
<igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
7272
<igx-grid-toolbar-actions>
7373
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
7474
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
@@ -90,7 +90,7 @@ <h4 class="sample-title">Sample One</h4>
9090
</ng-template>
9191
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
9292
[allowFiltering]="true">
93-
<igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
93+
<igx-grid-toolbar *igxGridToolbar>
9494
<igx-grid-toolbar-title>Child of the Child</igx-grid-toolbar-title>
9595
</igx-grid-toolbar>
9696
<igx-column field="ID" [hasSummary]='true'></igx-column>

‎src/app/hierarchical-grid/hierarchical-grid.sample.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export class HierarchicalGridSampleComponent implements AfterViewInit {
4242
public hgridState = [];
4343
public columns;
4444
public childColumns;
45+
public toolbarTitle = 'Child Grid 1';
4546

4647
public evenCondition = (row: RowType) => parseInt(row.data['ID'], 0) % 2 === 0;
4748
public rowClasses = {

0 commit comments

Comments
 (0)