Skip to content

Commit 686f29b

Browse files
tishko0tishko0
committed
feat(grids): added both side pinning samples
1 parent ed5b914 commit 686f29b

15 files changed

+558
-2
lines changed

‎src/app/grid/grid-routes-data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const gridsRoutesData = {
4545
'grid-sample-2': { displayName: 'Grid Financial Sample', parentName: 'Grid' },
4646
'grid-sample-pinning': { displayName: 'Grid Header Template with Pinning', parentName: 'Grid' },
4747
'grid-sample-toolbar-pinning': { displayName: 'Grid Toolbar Pinning', parentName: 'Grid' },
48+
'grid-toolbar-pinning-both-sides': { displayName: 'Grid Toolbar Pinning Both Sides', parentName: 'Grid' },
4849
'grid-sample-4': { displayName: 'Grid Remote Virtualization', parentName: 'Grid' },
4950
'grid-remote-filtering': { displayName: 'Grid Remote Filtering', parentName: 'Grid' },
5051
'grid-selection': { displayName: 'Grid Selection', parentName: 'Grid' },

‎src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div
2+
[ngClass]="{ grid__wrapper: true, 'dark-theme': useDarkTheme }"
3+
style="width: 100%"
4+
>
5+
<igx-grid
6+
[igxPreventDocumentScroll]="true"
7+
#grid1
8+
[data]="data"
9+
[width]="'100%'"
10+
[height]="'480px'"
11+
columnSelection="multiple"
12+
[pinning]="pinningConfig"
13+
[moving]="true"
14+
>
15+
<igx-grid-toolbar>
16+
<igx-grid-toolbar-actions>
17+
<button igxButton="contained" (click)="unpinColumn()"> Unpin Column </button>
18+
<button igxButton="contained" (click)="pinLeft()"> Pin Left </button>
19+
<button igxButton="contained" (click)="pinRight()"> Pin Right </button>
20+
</igx-grid-toolbar-actions>
21+
</igx-grid-toolbar>
22+
23+
@for (c of columns; track c) {
24+
<igx-column
25+
#col
26+
[field]="c.field"
27+
[header]="c.header"
28+
[width]="c.width"
29+
[pinned]="c.pinned"
30+
[hidden]="c.hidden"
31+
[headerClasses]="'customHeaderSyle'"
32+
[pinningPosition]="c.pinningPosition"
33+
>
34+
</igx-column>
35+
}
36+
</igx-grid>
37+
</div>

‎src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
:host ::ng-deep .title {
2+
width: 100%;
3+
}
4+
5+
.grid__wrapper {
6+
padding: 16px;
7+
}
8+
9+
.button {
10+
margin: 8px;
11+
width: 128px;
12+
}

‎src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core';
2+
import { NgClass } from '@angular/common';
3+
import {
4+
IgxColumnComponent,
5+
IgxGridComponent,
6+
IgxGridToolbarComponent,
7+
IgxGridToolbarActionsComponent,
8+
IgxGridToolbarPinningComponent,
9+
IgxDropDownComponent,
10+
IgxDropDownItemComponent,
11+
IgxButtonDirective,
12+
IgxToggleActionDirective,
13+
IgxDropDownItemNavigationDirective,
14+
ColumnPinningPosition,
15+
IPinningConfig
16+
} from 'igniteui-angular';
17+
import { DATA } from '../../data/customers';
18+
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
19+
import { ActivatedRoute } from '@angular/router';
20+
21+
@Component({
22+
encapsulation: ViewEncapsulation.None,
23+
providers: [],
24+
selector: 'app-grid-sample',
25+
styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'],
26+
templateUrl: 'grid-toolbar-pinning-both-sides.component.html',
27+
imports: [
28+
NgClass,
29+
IgxGridComponent,
30+
IgxPreventDocumentScrollDirective,
31+
IgxGridToolbarComponent,
32+
IgxGridToolbarActionsComponent,
33+
IgxGridToolbarPinningComponent,
34+
IgxColumnComponent,
35+
IgxDropDownComponent,
36+
IgxDropDownItemComponent,
37+
IgxButtonDirective,
38+
IgxToggleActionDirective,
39+
IgxDropDownItemNavigationDirective
40+
]
41+
})
42+
43+
export class GridBothSideToolbarPinningSampleComponent implements OnInit{
44+
private activatedRoute = inject(ActivatedRoute);
45+
46+
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
47+
48+
public useDarkTheme: boolean = false;
49+
public data: any[];
50+
public columns: any[];
51+
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
52+
53+
public ngOnInit(): void {
54+
this.columns = [
55+
{ field: 'CompanyName', header: 'Company Name', width: 300 },
56+
{ field: 'ContactName', header: 'Contact Name', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.Start },
57+
{ field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.End },
58+
{ field: 'Address', header: 'Address', width: 300},
59+
{ field: 'City', header: 'City', width: 120 },
60+
{ field: 'Region', header: 'Region', width: 120 },
61+
{ field: 'PostalCode', header: 'Postal Code', width: 150 },
62+
{ field: 'Phone', header: 'Phone', width: 150 },
63+
{ field: 'Fax', header: 'Fax', width: 150 }
64+
];
65+
this.data = DATA;
66+
67+
this.activatedRoute.queryParams.subscribe(params => {
68+
this.useDarkTheme = params.dark === 'true';
69+
});
70+
}
71+
72+
public pinLeft(){
73+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
74+
col.pinningPosition = ColumnPinningPosition.Start;
75+
col.pinned = true;
76+
});
77+
}
78+
public pinRight(){
79+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
80+
col.pinningPosition = ColumnPinningPosition.End;
81+
col.pinned = true;
82+
});
83+
}
84+
85+
public unpinColumn(){
86+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
87+
col.pinned = false;
88+
});
89+
}
90+
}

‎src/app/grid/grids.routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ import { GridValidatorServiceExtendedComponent } from './grid-validator-service-
131131
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
132132
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
133133
import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
134+
import { GridBothSideToolbarPinningSampleComponent } from './grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component';
134135

135136
// tslint:enable:max-line-length
136137

@@ -370,6 +371,11 @@ export const GridsRoutes: Routes = [
370371
data: gridsRoutesData['grid-sample-toolbar-pinning'],
371372
path: 'grid-sample-toolbar-pinning'
372373
},
374+
{
375+
component: GridBothSideToolbarPinningSampleComponent,
376+
data: gridsRoutesData['grid-toolbar-pinning-both-sides'],
377+
path: 'grid-toolbar-pinning-both-sides'
378+
},
373379
{
374380
component: GridRemoteVirtualizationSampleComponent,
375381
data: gridsRoutesData['grid-sample-4'],

‎src/app/hierarchical-grid/hierarchical-grid-routes-data.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,5 +86,6 @@ export const hierarchicalGridRoutesData = {
8686
'hierarchical-grid-validator-service-extended': { displayName: 'Hierarchical Grid Validator Service Extended', parentName: 'Hierarchical Grid' },
8787
'hGrid-columnAutosizing-sample': { displayName: 'HGrid Column Autosizing Sample', parentName: 'Hierarchical Grid' },
8888
'hierarchical-grid-cross-field-validation': { displayName: 'Hierarchical Grid Cross-field Validation', parentName: 'Hierarchical Grid' },
89-
'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' }
89+
'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' },
90+
'hierarchical-grid-both-sides-pinning': { displayName: 'Hierarchical Grid Both Sides Pinning', parentName: 'Hierarchical Grid' }
9091
};

‎src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<div class="grid__wrapper">
2+
<igx-hierarchical-grid
3+
#grid1
4+
[data]="data"
5+
width="100%"
6+
height="480px"
7+
[pinning]="pinningConfig"
8+
[autoGenerate]="false"
9+
columnSelection="multiple"
10+
[pinning]="pinningConfig"
11+
[moving]="true"
12+
>
13+
<igx-grid-toolbar>
14+
<igx-grid-toolbar-actions>
15+
<button igxButton="contained" (click)="unpinColumn()"> Unpin Column </button>
16+
<button igxButton="contained" (click)="pinLeft()"> Pin Left </button>
17+
<button igxButton="contained" (click)="pinRight()"> Pin Right </button>
18+
</igx-grid-toolbar-actions>
19+
</igx-grid-toolbar>
20+
21+
<igx-column field="CountryName" header="Team" width="88">
22+
<ng-template igxCell let-cell="cell">
23+
<div class="cell__inner country-cell">
24+
<img
25+
[src]="cell.row.data.CountryFlag"
26+
class="country-flag"
27+
#target="tooltipTarget"
28+
[igxTooltipTarget]="tooltipRef"
29+
/>
30+
<div #tooltipRef="tooltip" igxTooltip>
31+
{{ cell.row.data.CountryName }}
32+
</div>
33+
</div>
34+
</ng-template>
35+
</igx-column>
36+
37+
<igx-column field="Avatar" header="Photo" dataType="string" width="80" [disablePinning]="true">
38+
<ng-template igxCell let-cell="cell">
39+
<div class="cell__inner avatar-cell">
40+
<igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
41+
</div>
42+
</ng-template>
43+
</igx-column>
44+
45+
<igx-column field="Name" header="Name" [disablePinning]="true"></igx-column>
46+
<igx-column field="AthleteNumber" header="Number"></igx-column>
47+
<igx-column field="BeatsPerMinute" header="BPM"></igx-column>
48+
<igx-column field="TopSpeed" header="Top Speed"></igx-column>
49+
<igx-column field="TrackProgress" header="Track Progress" [disablePinning]="true"></igx-column>
50+
51+
<!-- Use the value from the cell context for date pipes -->
52+
<igx-column field="RegistrationDate" header="Date of Registration" width="170" [disablePinning]="true">
53+
<ng-template igxCell let-value>
54+
{{ value | date: 'longDate' }}
55+
</ng-template>
56+
</igx-column>
57+
58+
<igx-column field="Birthday" header="Birthday" width="170" [disablePinning]="true">
59+
<ng-template igxCell let-value>
60+
{{ value | date: 'longDate' }}
61+
</ng-template>
62+
</igx-column>
63+
64+
<igx-column field="Sponsor" header="Sponsor Company" width="160"></igx-column>
65+
66+
<igx-column #goldColumn field="FirstPlaces" header="Gold" width="110" [pinned]="true">
67+
<ng-template igxHeader>
68+
<div class="title-inner">
69+
<span style="float: left">{{ goldColumn.header }}</span>
70+
<igx-icon [style.color]="'#d2c206'">emoji_events</igx-icon>
71+
</div>
72+
</ng-template>
73+
</igx-column>
74+
75+
<igx-column #silverColumn field="SecondPlaces" header="Silver" width="110" [pinned]="true">
76+
<ng-template igxHeader>
77+
<div class="title-inner">
78+
<span style="float: left">{{ silverColumn.header }}</span>
79+
<igx-icon [style.color]="'#c5c5c5'">emoji_events</igx-icon>
80+
</div>
81+
</ng-template>
82+
</igx-column>
83+
84+
<igx-column #bronzeColumn field="ThirdPlaces" header="Bronze" width="110" [pinned]="true">
85+
<ng-template igxHeader>
86+
<div class="title-inner">
87+
<span style="float: left">{{ bronzeColumn.header }}</span>
88+
<igx-icon [style.color]="'#bb8b1d'">emoji_events</igx-icon>
89+
</div>
90+
</ng-template>
91+
</igx-column>
92+
93+
<igx-row-island [height]="null" [key]="'AgentData'" [autoGenerate]="false" [pinning]="pinningConfig" columnSelection="multiple">
94+
<igx-column field="avatar" header="Agent's Photo" width="80">
95+
<ng-template igxCell let-cell="cell">
96+
<div class="cell__inner avatar-cell">
97+
<igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
98+
</div>
99+
</ng-template>
100+
</igx-column>
101+
102+
<igx-column field="name" header="Agent"></igx-column>
103+
<igx-column field="company" header="Associated Company" width="160"></igx-column>
104+
<igx-column field="email" header="Work E-mail" width="250"></igx-column>
105+
<igx-column field="work_phone" header="Work Phone" width="160"></igx-column>
106+
107+
<igx-column field="street" header="Street" width="200" [pinned]="true"></igx-column>
108+
<igx-column field="city" header="City" [pinned]="true"></igx-column>
109+
<igx-column field="post_code" header="Post Code"></igx-column>
110+
<igx-column field="state" header="State"></igx-column>
111+
<igx-column field="country" header="Country" [pinned]="true"></igx-column>
112+
<igx-column field="refferred_by" header="Referred by"></igx-column>
113+
</igx-row-island>
114+
</igx-hierarchical-grid>
115+
</div>

‎src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.title-inner {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
}
6+
7+
.grid__wrapper {
8+
margin: 0 auto;
9+
padding: 16px;
10+
}
11+
12+
img.country-flag {
13+
width: 35px;
14+
height: 20px;
15+
}

0 commit comments

Comments
 (0)