Skip to content

Commit c499eaf

Browse files
tishko0tishko0
authored
feat(grids): added both side pinning samples (#3725)
1 parent 20ac142 commit c499eaf

18 files changed

+523
-2
lines changed

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -880,6 +880,12 @@ export class GridConfigGenerator implements IConfigGenerator {
880880
appConfig: BaseAppConfig
881881
}));
882882

883+
configs.push(new Config({
884+
component: 'GridBothSideToolbarPinningSampleComponent',
885+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'],
886+
appConfig: BaseAppConfig
887+
}));
888+
883889
return configs;
884890
}
885891
}

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -654,6 +654,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
654654
]
655655
}));
656656

657+
configs.push(new Config({
658+
component: 'HierarchicalGridBothSidePinningSampleComponent',
659+
appConfig: BaseAppConfig,
660+
additionalFiles: [
661+
'/src/app/directives/prevent-scroll.directive.ts',
662+
'/src/app/data/employeesData.ts',
663+
'/src/app/data/athletesData.ts'
664+
]
665+
}));
666+
657667
return configs;
658668
}
659669
}

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -800,6 +800,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
800800
]
801801
}));
802802

803+
configs.push(new Config({
804+
component: 'TreeGridBothSidesPinningSampleComponent',
805+
additionalFiles: [
806+
'/src/app/directives/prevent-scroll.directive.ts',
807+
'/src/app/tree-grid/data/employees-flat-detailed.ts'
808+
],
809+
appConfig: BaseAppConfig
810+
}));
811+
803812
return configs;
804813
}
805814
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const gridsRoutesData = {
4747
'grid-sample-2': { displayName: 'Grid Financial Sample', parentName: 'Grid' },
4848
'grid-sample-pinning': { displayName: 'Grid Header Template with Pinning', parentName: 'Grid' },
4949
'grid-sample-toolbar-pinning': { displayName: 'Grid Toolbar Pinning', parentName: 'Grid' },
50+
'grid-toolbar-pinning-both-sides': { displayName: 'Grid Toolbar Pinning Both Sides', parentName: 'Grid' },
5051
'grid-sample-4': { displayName: 'Grid Remote Virtualization', parentName: 'Grid' },
5152
'grid-remote-filtering': { displayName: 'Grid Remote Filtering', parentName: 'Grid' },
5253
'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: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
IgxButtonDirective,
9+
ColumnPinningPosition,
10+
IPinningConfig
11+
} from 'igniteui-angular';
12+
import { DATA } from '../../data/customers';
13+
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
14+
15+
@Component({
16+
encapsulation: ViewEncapsulation.None,
17+
providers: [],
18+
selector: 'app-grid-sample',
19+
styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'],
20+
templateUrl: 'grid-toolbar-pinning-both-sides.component.html',
21+
imports: [
22+
NgClass,
23+
IgxGridComponent,
24+
IgxPreventDocumentScrollDirective,
25+
IgxGridToolbarComponent,
26+
IgxGridToolbarActionsComponent,
27+
IgxColumnComponent,
28+
IgxButtonDirective
29+
]
30+
})
31+
32+
export class GridBothSideToolbarPinningSampleComponent implements OnInit {
33+
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
34+
35+
public useDarkTheme: boolean = false;
36+
public data: any[];
37+
public columns: any[];
38+
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
39+
40+
public ngOnInit(): void {
41+
this.columns = [
42+
{ field: 'CompanyName', header: 'Company Name', width: 300 },
43+
{ field: 'ContactName', header: 'Contact Name', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.Start },
44+
{ field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.End },
45+
{ field: 'Address', header: 'Address', width: 300 },
46+
{ field: 'City', header: 'City', width: 120 },
47+
{ field: 'Region', header: 'Region', width: 120 },
48+
{ field: 'PostalCode', header: 'Postal Code', width: 150 },
49+
{ field: 'Phone', header: 'Phone', width: 150 },
50+
{ field: 'Fax', header: 'Fax', width: 150 }
51+
];
52+
this.data = DATA;
53+
}
54+
55+
public pinLeft() {
56+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
57+
col.pinningPosition = ColumnPinningPosition.Start;
58+
col.pinned = true;
59+
});
60+
}
61+
public pinRight() {
62+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
63+
col.pinningPosition = ColumnPinningPosition.End;
64+
col.pinned = true;
65+
});
66+
}
67+
68+
public unpinColumn() {
69+
this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
70+
col.pinned = false;
71+
});
72+
}
73+
}

‎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
import { GridCellMergeSampleComponent } from './grid-cell-merge-sample/grid-cell-merge-sample.component';
135136
import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component';
136137

@@ -382,6 +383,11 @@ export const GridsRoutes: Routes = [
382383
data: gridsRoutesData['grid-sample-toolbar-pinning'],
383384
path: 'grid-sample-toolbar-pinning'
384385
},
386+
{
387+
component: GridBothSideToolbarPinningSampleComponent,
388+
data: gridsRoutesData['grid-toolbar-pinning-both-sides'],
389+
path: 'grid-toolbar-pinning-both-sides'
390+
},
385391
{
386392
component: GridRemoteVirtualizationSampleComponent,
387393
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
@@ -87,5 +87,6 @@ export const hierarchicalGridRoutesData = {
8787
'hierarchical-grid-validator-service-extended': { displayName: 'Hierarchical Grid Validator Service Extended', parentName: 'Hierarchical Grid' },
8888
'hGrid-columnAutosizing-sample': { displayName: 'HGrid Column Autosizing Sample', parentName: 'Hierarchical Grid' },
8989
'hierarchical-grid-cross-field-validation': { displayName: 'Hierarchical Grid Cross-field Validation', parentName: 'Hierarchical Grid' },
90-
'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' }
90+
'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' },
91+
'hierarchical-grid-both-sides-pinning': { displayName: 'Hierarchical Grid Both Sides Pinning', parentName: 'Hierarchical Grid' }
9192
};

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

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

0 commit comments

Comments
 (0)