Skip to content

Commit cd2d2b9

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Adding separate sample for row pinning with custom UI.
1 parent 5463942 commit cd2d2b9

File tree

8 files changed

+164
-0
lines changed

8 files changed

+164
-0
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4078,6 +4078,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
40784078
this.pinnedRecords.splice(index, 1);
40794079
this._pipeTrigger++;
40804080
if (this.gridAPI.grid) {
4081+
this.cdr.detectChanges();
40814082
this.notifyChanges(true);
40824083
}
40834084
return true;

‎src/app/app.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,11 @@ export class AppComponent implements OnInit {
192192
icon: 'view_column',
193193
name: 'Grid Column Pinning'
194194
},
195+
{
196+
link: '/gridRowPinning',
197+
icon: 'view_column',
198+
name: 'Grid Row Pinning'
199+
},
195200
{
196201
link: '/gridColumnResizing',
197202
icon: 'view_column',

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
115115
import { AboutComponent } from './grid-state/about.component';
116116
import { GridSaveStateComponent } from './grid-state/grid-state.component';
117117
import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
118+
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
118119

119120
const components = [
120121
AppComponent,
@@ -176,6 +177,7 @@ const components = [
176177
GridSampleComponent,
177178
GridColumnMovingSampleComponent,
178179
GridColumnPinningSampleComponent,
180+
GridRowPinningSampleComponent,
179181
GridColumnResizingSampleComponent,
180182
GridGroupBySampleComponent,
181183
GridMasterDetailSampleComponent,

‎src/app/app.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import { GridAutoSizeSampleComponent } from './grid-auto-size/grid-auto-size.sam
6868
import { GridSaveStateComponent } from './grid-state/grid-state.component';
6969
import { AboutComponent } from './grid-state/about.component';
7070
import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
71+
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
7172

7273
const appRoutes = [
7374
{
@@ -245,6 +246,10 @@ const appRoutes = [
245246
path: 'gridColumnPinning',
246247
component: GridColumnPinningSampleComponent
247248
},
249+
{
250+
path: 'gridRowPinning',
251+
component: GridRowPinningSampleComponent
252+
},
248253
{
249254
path: 'gridColumnResizing',
250255
component: GridColumnResizingSampleComponent

‎src/app/grid-row-pinning/grid-row-pinning.sample.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.sample-buttons,
2+
.sample-switches {
3+
margin-top: 24px;
4+
}
5+
6+
[igxButton]+[igxButton] {
7+
margin-left: 8px;
8+
}
9+
10+
.pin-icon {
11+
cursor: pointer;
12+
color: #999;
13+
}
14+
15+
.pin-icon:hover {
16+
color: #444
17+
}

‎src/app/grid-row-pinning/grid-row-pinning.sample.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="wrapper">
2+
<app-page-header title="Grid Column Pinning">
3+
Allows rows to be pinned to the beginning/end of the grid.
4+
</app-page-header>
5+
<div class="sample-content">
6+
<div class="sample-column">
7+
<div class="sample-switches">
8+
<igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
9+
<igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
10+
</div>
11+
<igx-grid [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
12+
<igx-column width='50px'>
13+
<ng-template igxCell let-cell="cell" let-val>
14+
<igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
15+
{{isRowPinned(cell.row) ? 'lock' : 'lock_open'}}
16+
</igx-icon>
17+
</ng-template>
18+
</igx-column>
19+
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
20+
[hidden]='c.hidden'>
21+
</igx-column>
22+
</igx-grid>
23+
</div>
24+
</div>
25+
</div>

‎src/app/grid-row-pinning/grid-row-pinning.sample.ts

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent } from 'igniteui-angular';
3+
import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
4+
5+
@Component({
6+
providers: [],
7+
selector: 'app-grid-row-pinning-sample',
8+
styleUrls: ['grid-row-pinning.sample.css'],
9+
templateUrl: 'grid-row-pinning.sample.html'
10+
})
11+
12+
export class GridRowPinningSampleComponent implements OnInit {
13+
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start };
14+
15+
@ViewChild('grid1', { static: true })
16+
grid1: IgxGridComponent;
17+
18+
onRowChange() {
19+
if (this.pinningConfig.rows === RowPinningPosition.Bottom) {
20+
this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top };
21+
} else {
22+
this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom };
23+
}
24+
}
25+
26+
onChange() {
27+
if (this.pinningConfig.columns === ColumnPinningPosition.End) {
28+
this.pinningConfig = { columns: ColumnPinningPosition.Start, rows: this.pinningConfig.rows };
29+
} else {
30+
this.pinningConfig = { columns: ColumnPinningPosition.End, rows: this.pinningConfig.rows };
31+
}
32+
}
33+
34+
data: any[];
35+
columns: any[];
36+
37+
ngOnInit(): void {
38+
this.columns = [
39+
{ field: 'ID', width: '200px', hidden: false },
40+
{ field: 'CompanyName', width: '200px' },
41+
{ field: 'ContactName', width: '200px', pinned: false },
42+
{ field: 'ContactTitle', width: '300px', pinned: false },
43+
{ field: 'Address', width: '250px' },
44+
{ field: 'City', width: '200px' },
45+
{ field: 'Region', width: '300px' },
46+
{ field: 'PostalCode', width: '150px' },
47+
{ field: 'Phone', width: '200px' },
48+
{ field: 'Fax', width: '200px' }
49+
];
50+
51+
this.data = [
52+
// tslint:disable:max-line-length
53+
{ 'ID': 'ALFKI', 'CompanyName': 'Alfreds Futterkiste', 'ContactName': 'Maria Anders', 'ContactTitle': 'Sales Representative', 'Address': 'Obere Str. 57', 'City': 'Berlin', 'Region': null, 'PostalCode': '12209', 'Country': 'Germany', 'Phone': '030-0074321', 'Fax': '030-0076545' },
54+
{ 'ID': 'ANATR', 'CompanyName': 'Ana Trujillo Emparedados y helados', 'ContactName': 'Ana Trujillo', 'ContactTitle': 'Owner', 'Address': 'Avda. de la Constitución 2222', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05021', 'Country': 'Mexico', 'Phone': '(5) 555-4729', 'Fax': '(5) 555-3745' },
55+
{ 'ID': 'ANTON', 'CompanyName': 'Antonio Moreno Taquería', 'ContactName': 'Antonio Moreno', 'ContactTitle': 'Owner', 'Address': 'Mataderos 2312', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05023', 'Country': 'Mexico', 'Phone': '(5) 555-3932', 'Fax': null },
56+
{ 'ID': 'AROUT', 'CompanyName': 'Around the Horn', 'ContactName': 'Thomas Hardy', 'ContactTitle': 'Sales Representative', 'Address': '120 Hanover Sq.', 'City': 'London', 'Region': null, 'PostalCode': 'WA1 1DP', 'Country': 'UK', 'Phone': '(171) 555-7788', 'Fax': '(171) 555-6750' },
57+
{ 'ID': 'BERGS', 'CompanyName': 'Berglunds snabbköp', 'ContactName': 'Christina Berglund', 'ContactTitle': 'Order Administrator', 'Address': 'Berguvsvägen 8', 'City': 'Luleå', 'Region': null, 'PostalCode': 'S-958 22', 'Country': 'Sweden', 'Phone': '0921-12 34 65', 'Fax': '0921-12 34 67' },
58+
{ 'ID': 'BLAUS', 'CompanyName': 'Blauer See Delikatessen', 'ContactName': 'Hanna Moos', 'ContactTitle': 'Sales Representative', 'Address': 'Forsterstr. 57', 'City': 'Mannheim', 'Region': null, 'PostalCode': '68306', 'Country': 'Germany', 'Phone': '0621-08460', 'Fax': '0621-08924' },
59+
{ 'ID': 'BLONP', 'CompanyName': 'Blondesddsl père et fils', 'ContactName': 'Frédérique Citeaux', 'ContactTitle': 'Marketing Manager', 'Address': '24, place Kléber', 'City': 'Strasbourg', 'Region': null, 'PostalCode': '67000', 'Country': 'France', 'Phone': '88.60.15.31', 'Fax': '88.60.15.32' },
60+
{ 'ID': 'BOLID', 'CompanyName': 'Bólido Comidas preparadas', 'ContactName': 'Martín Sommer', 'ContactTitle': 'Owner', 'Address': 'C/ Araquil, 67', 'City': 'Madrid', 'Region': null, 'PostalCode': '28023', 'Country': 'Spain', 'Phone': '(91) 555 22 82', 'Fax': '(91) 555 91 99' },
61+
{ 'ID': 'BONAP', 'CompanyName': 'Bon app\'', 'ContactName': 'Laurence Lebihan', 'ContactTitle': 'Owner', 'Address': '12, rue des Bouchers', 'City': 'Marseille', 'Region': null, 'PostalCode': '13008', 'Country': 'France', 'Phone': '91.24.45.40', 'Fax': '91.24.45.41' },
62+
{ 'ID': 'BOTTM', 'CompanyName': 'Bottom-Dollar Markets', 'ContactName': 'Elizabeth Lincoln', 'ContactTitle': 'Accounting Manager', 'Address': '23 Tsawassen Blvd.', 'City': 'Tsawassen', 'Region': 'BC', 'PostalCode': 'T2F 8M4', 'Country': 'Canada', 'Phone': '(604) 555-4729', 'Fax': '(604) 555-3745' },
63+
{ 'ID': 'BSBEV', 'CompanyName': 'B\'s Beverages', 'ContactName': 'Victoria Ashworth', 'ContactTitle': 'Sales Representative', 'Address': 'Fauntleroy Circus', 'City': 'London', 'Region': null, 'PostalCode': 'EC2 5NT', 'Country': 'UK', 'Phone': '(171) 555-1212', 'Fax': null },
64+
{ 'ID': 'CACTU', 'CompanyName': 'Cactus Comidas para llevar', 'ContactName': 'Patricio Simpson', 'ContactTitle': 'Sales Agent', 'Address': 'Cerrito 333', 'City': 'Buenos Aires', 'Region': null, 'PostalCode': '1010', 'Country': 'Argentina', 'Phone': '(1) 135-5555', 'Fax': '(1) 135-4892' },
65+
{ 'ID': 'CENTC', 'CompanyName': 'Centro comercial Moctezuma', 'ContactName': 'Francisco Chang', 'ContactTitle': 'Marketing Manager', 'Address': 'Sierras de Granada 9993', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05022', 'Country': 'Mexico', 'Phone': '(5) 555-3392', 'Fax': '(5) 555-7293' },
66+
{ 'ID': 'CHOPS', 'CompanyName': 'Chop-suey Chinese', 'ContactName': 'Yang Wang', 'ContactTitle': 'Owner', 'Address': 'Hauptstr. 29', 'City': 'Bern', 'Region': null, 'PostalCode': '3012', 'Country': 'Switzerland', 'Phone': '0452-076545', 'Fax': null },
67+
{ 'ID': 'COMMI', 'CompanyName': 'Comércio Mineiro', 'ContactName': 'Pedro Afonso', 'ContactTitle': 'Sales Associate', 'Address': 'Av. dos Lusíadas, 23', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05432-043', 'Country': 'Brazil', 'Phone': '(11) 555-7647', 'Fax': null },
68+
{ 'ID': 'CONSH', 'CompanyName': 'Consolidated Holdings', 'ContactName': 'Elizabeth Brown', 'ContactTitle': 'Sales Representative', 'Address': 'Berkeley Gardens 12 Brewery', 'City': 'London', 'Region': null, 'PostalCode': 'WX1 6LT', 'Country': 'UK', 'Phone': '(171) 555-2282', 'Fax': '(171) 555-9199' },
69+
{ 'ID': 'DRACD', 'CompanyName': 'Drachenblut Delikatessen', 'ContactName': 'Sven Ottlieb', 'ContactTitle': 'Order Administrator', 'Address': 'Walserweg 21', 'City': 'Aachen', 'Region': null, 'PostalCode': '52066', 'Country': 'Germany', 'Phone': '0241-039123', 'Fax': '0241-059428' },
70+
{ 'ID': 'DUMON', 'CompanyName': 'Du monde entier', 'ContactName': 'Janine Labrune', 'ContactTitle': 'Owner', 'Address': '67, rue des Cinquante Otages', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.67.88.88', 'Fax': '40.67.89.89' },
71+
{ 'ID': 'EASTC', 'CompanyName': 'Eastern Connection', 'ContactName': 'Ann Devon', 'ContactTitle': 'Sales Agent', 'Address': '35 King George', 'City': 'London', 'Region': null, 'PostalCode': 'WX3 6FW', 'Country': 'UK', 'Phone': '(171) 555-0297', 'Fax': '(171) 555-3373' },
72+
{ 'ID': 'ERNSH', 'CompanyName': 'Ernst Handel', 'ContactName': 'Roland Mendel', 'ContactTitle': 'Sales Manager', 'Address': 'Kirchgasse 6', 'City': 'Graz', 'Region': null, 'PostalCode': '8010', 'Country': 'Austria', 'Phone': '7675-3425', 'Fax': '7675-3426' },
73+
{ 'ID': 'FAMIA', 'CompanyName': 'Familia Arquibaldo', 'ContactName': 'Aria Cruz', 'ContactTitle': 'Marketing Assistant', 'Address': 'Rua Orós, 92', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05442-030', 'Country': 'Brazil', 'Phone': '(11) 555-9857', 'Fax': null },
74+
{ 'ID': 'FISSA', 'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.', 'ContactName': 'Diego Roel', 'ContactTitle': 'Accounting Manager', 'Address': 'C/ Moralzarzal, 86', 'City': 'Madrid', 'Region': null, 'PostalCode': '28034', 'Country': 'Spain', 'Phone': '(91) 555 94 44', 'Fax': '(91) 555 55 93' },
75+
{ 'ID': 'FOLIG', 'CompanyName': 'Folies gourmandes', 'ContactName': 'Martine Rancé', 'ContactTitle': 'Assistant Sales Agent', 'Address': '184, chaussée de Tournai', 'City': 'Lille', 'Region': null, 'PostalCode': '59000', 'Country': 'France', 'Phone': '20.16.10.16', 'Fax': '20.16.10.17' },
76+
{ 'ID': 'FOLKO', 'CompanyName': 'Folk och fä HB', 'ContactName': 'Maria Larsson', 'ContactTitle': 'Owner', 'Address': 'Åkergatan 24', 'City': 'Bräcke', 'Region': null, 'PostalCode': 'S-844 67', 'Country': 'Sweden', 'Phone': '0695-34 67 21', 'Fax': null },
77+
{ 'ID': 'FRANK', 'CompanyName': 'Frankenversand', 'ContactName': 'Peter Franken', 'ContactTitle': 'Marketing Manager', 'Address': 'Berliner Platz 43', 'City': 'München', 'Region': null, 'PostalCode': '80805', 'Country': 'Germany', 'Phone': '089-0877310', 'Fax': '089-0877451' },
78+
{ 'ID': 'FRANR', 'CompanyName': 'France restauration', 'ContactName': 'Carine Schmitt', 'ContactTitle': 'Marketing Manager', 'Address': '54, rue Royale', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.32.21.21', 'Fax': '40.32.21.20' },
79+
{ 'ID': 'FRANS', 'CompanyName': 'Franchi S.p.A.', 'ContactName': 'Paolo Accorti', 'ContactTitle': 'Sales Representative', 'Address': 'Via Monte Bianco 34', 'City': 'Torino', 'Region': null, 'PostalCode': '10100', 'Country': 'Italy', 'Phone': '011-4988260', 'Fax': '011-4988261' }
80+
];
81+
// tslint:enable:max-line-length
82+
}
83+
84+
togglePinRow(index) {
85+
const rec = this.data[index];
86+
this.grid1.pinnedRecords.indexOf(rec) === -1 ?
87+
this.grid1.pinRow(this.data[index]) :
88+
this.grid1.unpinRow(this.data[index])
89+
}
90+
91+
togglePining(row: IgxGridRowComponent, event) {
92+
event.preventDefault();
93+
if(this.isRowPinned(row)) {
94+
row.unpin();
95+
} else {
96+
row.pin();
97+
}
98+
}
99+
100+
isRowPinned(row) {
101+
return this.grid1.pinnedRecords.indexOf(row.rowID) !== -1;
102+
}
103+
104+
}

‎src/app/routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
9292
import { GridSaveStateComponent } from './grid-state/grid-state.component';
9393
import { AboutComponent } from './grid-state/about.component';
9494
import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
95+
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
9596

9697
const appRoutes = [
9798
{
@@ -332,6 +333,10 @@ const appRoutes = [
332333
path: 'gridColumnPinning',
333334
component: GridColumnPinningSampleComponent
334335
},
336+
{
337+
path: 'gridRowPinning',
338+
component: GridRowPinningSampleComponent
339+
},
335340
{
336341
path: 'gridColumnResizing',
337342
component: GridColumnResizingSampleComponent

0 commit comments

Comments
 (0)