@@ -112,7 +112,8 @@ import {
112112 GridSummaryPosition ,
113113 GridSummaryCalculationMode ,
114114 FilterMode ,
115- ColumnPinningPosition
115+ ColumnPinningPosition ,
116+ RowPinningPosition
116117} from './common/enums' ;
117118import {
118119 IGridCellEventArgs ,
@@ -133,7 +134,8 @@ import {
133134 ISearchInfo ,
134135 ICellPosition ,
135136 IRowToggleEventArgs ,
136- IColumnSelectionEventArgs
137+ IColumnSelectionEventArgs ,
138+ IPinRowEventArgs
137139} from './common/events' ;
138140import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component' ;
139141import { GridType , IPinningConfig } from './common/grid.interface' ;
@@ -1388,6 +1390,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
13881390 @Output ( )
13891391 public onRowToggle = new EventEmitter < IRowToggleEventArgs > ( ) ;
13901392
1393+ /**
1394+ * Emitted when the pinned state of a row is changed.
1395+ * @example
1396+ * ```html
1397+ * <igx-grid [data]="employeeData" (onRowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>
1398+ * ```
1399+ */
1400+ @Output ( )
1401+ public onRowPinning = new EventEmitter < IPinRowEventArgs > ( ) ;
1402+
13911403 /**
13921404 * @hidden @internal
13931405 */
@@ -1632,6 +1644,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
16321644 return this . pinning . columns !== ColumnPinningPosition . End ;
16331645 }
16341646
1647+ /**
1648+ * @hidden
1649+ * @internal
1650+ */
1651+ get isRowPinningToTop ( ) {
1652+ return this . pinning . rows !== RowPinningPosition . Bottom ;
1653+ }
1654+
16351655 /**
16361656 * @hidden
16371657 * @internal
@@ -1724,6 +1744,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
17241744 @ViewChild ( 'tbody' , { static : true } )
17251745 public tbody : ElementRef ;
17261746
1747+ /**
1748+ * @hidden @internal
1749+ */
1750+ @ViewChild ( 'pinContainer' , { static : false } )
1751+ public pinContainer : ElementRef ;
1752+
17271753 /**
17281754 * @hidden @internal
17291755 */
@@ -2454,6 +2480,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
24542480 protected _columnPinning = false ;
24552481
24562482
2483+ /**
2484+ * @hidden
2485+ */
2486+ public get pinnedRecords ( ) {
2487+ return this . _pinnedRecords ;
2488+ }
2489+
2490+ protected _pinnedRecords = [ ] ;
2491+
24572492 /**
24582493 * @hidden
24592494 */
@@ -3275,6 +3310,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
32753310 return this . _pinnedVisible ;
32763311 }
32773312
3313+ /**
3314+ * Gets an array of the pinned `IgxRowComponent`s.
3315+ * @example
3316+ * ```typescript
3317+ * const pinnedRow = this.grid.pinnedRows;
3318+ * ```
3319+ */
3320+ get pinnedRows ( ) : IgxGridRowComponent [ ] {
3321+ return this . rowList . filter ( x => x . pinned ) ;
3322+ }
3323+
32783324 /**
32793325 * Gets an array of unpinned `IgxColumnComponent`s.
32803326 * @example
@@ -4008,6 +4054,87 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
40084054 return col . unpin ( index ) ;
40094055 }
40104056
4057+ /**
4058+ * Pin the row by its id.
4059+ * @remarks
4060+ * ID is either the primaryKey value or the data record instance.
4061+ * @example
4062+ * ```typescript
4063+ * this.grid.pinRow(rowID);
4064+ * ```
4065+ * @param rowID The row id - primaryKey value or the data record instance.
4066+ * @param index The index at which to insert the row in the pinned collection.
4067+ */
4068+ public pinRow ( rowID : any , index ?: number ) : boolean {
4069+ const rec = this . gridAPI . get_rec_by_id ( rowID ) ;
4070+ if ( ! rec || this . pinnedRecords . indexOf ( rec ) !== - 1 || this . data . indexOf ( rec ) === - 1 ) {
4071+ return false ;
4072+ }
4073+ const row = this . gridAPI . get_row_by_key ( rowID ) ;
4074+
4075+ const eventArgs : IPinRowEventArgs = {
4076+ insertAtIndex : index ,
4077+ isPinned : true ,
4078+ rowID : rowID ,
4079+ row : row
4080+ } ;
4081+ this . onRowPinning . emit ( eventArgs ) ;
4082+
4083+ this . pinnedRecords . splice ( eventArgs . insertAtIndex || this . pinnedRecords . length , 0 , rec ) ;
4084+ this . _pipeTrigger ++ ;
4085+ if ( this . gridAPI . grid ) {
4086+ this . notifyChanges ( true ) ;
4087+ }
4088+ }
4089+
4090+ /**
4091+ * Unpin the row by its id.
4092+ * @remarks
4093+ * ID is either the primaryKey value or the data record instance.
4094+ * @example
4095+ * ```typescript
4096+ * this.grid.unpinRow(rowID);
4097+ * ```
4098+ * @param rowID The row id - primaryKey value or the data record instance.
4099+ */
4100+ public unpinRow ( rowID : any ) {
4101+ const rec = this . gridAPI . get_rec_by_id ( rowID ) ;
4102+ const index = this . pinnedRecords . indexOf ( rec ) ;
4103+ if ( index === - 1 || ! rec ) {
4104+ return false ;
4105+ }
4106+ const row = this . gridAPI . get_row_by_key ( rowID ) ;
4107+ const eventArgs : IPinRowEventArgs = {
4108+ isPinned : false ,
4109+ rowID : rowID ,
4110+ row : row
4111+ } ;
4112+ this . onRowPinning . emit ( eventArgs ) ;
4113+ this . pinnedRecords . splice ( index , 1 ) ;
4114+ this . _pipeTrigger ++ ;
4115+ if ( this . gridAPI . grid ) {
4116+ this . cdr . detectChanges ( ) ;
4117+ this . notifyChanges ( true ) ;
4118+ }
4119+ return true ;
4120+ }
4121+
4122+ get pinnedRowHeight ( ) {
4123+ const containerHeight = this . pinContainer ? this . pinContainer . nativeElement . offsetHeight : 0 ;
4124+ return this . pinnedRecords . length > 0 ? containerHeight : 0 ;
4125+ }
4126+
4127+ get totalHeight ( ) {
4128+ return this . calcHeight ? this . calcHeight + this . pinnedRowHeight : this . calcHeight ;
4129+ }
4130+
4131+ get pinnedBottom ( ) {
4132+ const start = this . verticalScrollContainer . state . startIndex ;
4133+ const end = this . verticalScrollContainer . state . startIndex + this . verticalScrollContainer . state . chunkSize - 1 ;
4134+ const bottom = this . verticalScrollContainer . getScrollForIndex ( end , true ) - this . verticalScrollContainer . getScrollForIndex ( start ) ;
4135+ return bottom ;
4136+ }
4137+
40114138
40124139 /**
40134140 * Recalculates grid width/height dimensions.
@@ -4313,6 +4440,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
43134440 }
43144441
43154442 this . calcHeight = this . _calculateGridBodyHeight ( ) ;
4443+ if ( this . pinnedRowHeight && this . calcHeight ) {
4444+ this . calcHeight -= this . pinnedRowHeight ;
4445+ }
43164446 }
43174447
43184448 /**
0 commit comments