@@ -109,7 +109,8 @@ import {
109109 GridSummaryPosition ,
110110 GridSummaryCalculationMode ,
111111 FilterMode ,
112- ColumnPinningPosition
112+ ColumnPinningPosition ,
113+ RowPinningPosition
113114} from './common/enums' ;
114115import {
115116 IGridCellEventArgs ,
@@ -129,7 +130,8 @@ import {
129130 IGridToolbarExportEventArgs ,
130131 ISearchInfo ,
131132 ICellPosition ,
132- IRowToggleEventArgs
133+ IRowToggleEventArgs ,
134+ IPinRowEventArgs
133135} from './common/events' ;
134136import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component' ;
135137import { GridType , IPinningConfig } from './common/grid.interface' ;
@@ -1374,6 +1376,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
13741376 @Output ( )
13751377 public onRowToggle = new EventEmitter < IRowToggleEventArgs > ( ) ;
13761378
1379+ /**
1380+ * Emitted when the pinned state of a row is changed.
1381+ * @example
1382+ * ```html
1383+ * <igx-grid [data]="employeeData" (onRowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>
1384+ * ```
1385+ */
1386+ @Output ( )
1387+ public onRowPinning = new EventEmitter < IPinRowEventArgs > ( ) ;
1388+
13771389 /**
13781390 * @hidden @internal
13791391 */
@@ -1612,6 +1624,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
16121624 return this . pinning . columns !== ColumnPinningPosition . End ;
16131625 }
16141626
1627+ /**
1628+ * @hidden
1629+ * @internal
1630+ */
1631+ get isRowPinningToTop ( ) {
1632+ return this . pinning . rows !== RowPinningPosition . Bottom ;
1633+ }
1634+
16151635 /**
16161636 * @hidden
16171637 * @internal
@@ -1704,6 +1724,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
17041724 @ViewChild ( 'tbody' , { static : true } )
17051725 public tbody : ElementRef ;
17061726
1727+ /**
1728+ * @hidden @internal
1729+ */
1730+ @ViewChild ( 'pinContainer' , { static : false } )
1731+ public pinContainer : ElementRef ;
1732+
17071733 /**
17081734 * @hidden @internal
17091735 */
@@ -2434,6 +2460,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
24342460 protected _columnPinning = false ;
24352461
24362462
2463+ /**
2464+ * @hidden
2465+ */
2466+ public get pinnedRecords ( ) {
2467+ return this . _pinnedRecords ;
2468+ }
2469+
2470+ protected _pinnedRecords = [ ] ;
2471+
24372472 /**
24382473 * @hidden
24392474 */
@@ -3255,6 +3290,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
32553290 return this . _pinnedVisible ;
32563291 }
32573292
3293+ /**
3294+ * Gets an array of the pinned `IgxRowComponent`s.
3295+ * @example
3296+ * ```typescript
3297+ * const pinnedRow = this.grid.pinnedRows;
3298+ * ```
3299+ */
3300+ get pinnedRows ( ) : IgxGridRowComponent [ ] {
3301+ return this . rowList . filter ( x => x . pinned ) ;
3302+ }
3303+
32583304 /**
32593305 * Gets an array of unpinned `IgxColumnComponent`s.
32603306 * @example
@@ -3988,6 +4034,87 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
39884034 return col . unpin ( index ) ;
39894035 }
39904036
4037+ /**
4038+ * Pin the row by its id.
4039+ * @remarks
4040+ * ID is either the primaryKey value or the data record instance.
4041+ * @example
4042+ * ```typescript
4043+ * this.grid.pinRow(rowID);
4044+ * ```
4045+ * @param rowID The row id - primaryKey value or the data record instance.
4046+ * @param index The index at which to insert the row in the pinned collection.
4047+ */
4048+ public pinRow ( rowID : any , index ?: number ) : boolean {
4049+ const rec = this . gridAPI . get_rec_by_id ( rowID ) ;
4050+ if ( ! rec || this . pinnedRecords . indexOf ( rec ) !== - 1 || this . data . indexOf ( rec ) === - 1 ) {
4051+ return false ;
4052+ }
4053+ const row = this . gridAPI . get_row_by_key ( rowID ) ;
4054+
4055+ const eventArgs : IPinRowEventArgs = {
4056+ insertAtIndex : index ,
4057+ isPinned : true ,
4058+ rowID : rowID ,
4059+ row : row
4060+ } ;
4061+ this . onRowPinning . emit ( eventArgs ) ;
4062+
4063+ this . pinnedRecords . splice ( eventArgs . insertAtIndex || this . pinnedRecords . length , 0 , rec ) ;
4064+ this . _pipeTrigger ++ ;
4065+ if ( this . gridAPI . grid ) {
4066+ this . notifyChanges ( true ) ;
4067+ }
4068+ }
4069+
4070+ /**
4071+ * Unpin the row by its id.
4072+ * @remarks
4073+ * ID is either the primaryKey value or the data record instance.
4074+ * @example
4075+ * ```typescript
4076+ * this.grid.unpinRow(rowID);
4077+ * ```
4078+ * @param rowID The row id - primaryKey value or the data record instance.
4079+ */
4080+ public unpinRow ( rowID : any ) {
4081+ const rec = this . gridAPI . get_rec_by_id ( rowID ) ;
4082+ const index = this . pinnedRecords . indexOf ( rec ) ;
4083+ if ( index === - 1 || ! rec ) {
4084+ return false ;
4085+ }
4086+ const row = this . gridAPI . get_row_by_key ( rowID ) ;
4087+ const eventArgs : IPinRowEventArgs = {
4088+ isPinned : false ,
4089+ rowID : rowID ,
4090+ row : row
4091+ } ;
4092+ this . onRowPinning . emit ( eventArgs ) ;
4093+ this . pinnedRecords . splice ( index , 1 ) ;
4094+ this . _pipeTrigger ++ ;
4095+ if ( this . gridAPI . grid ) {
4096+ this . cdr . detectChanges ( ) ;
4097+ this . notifyChanges ( true ) ;
4098+ }
4099+ return true ;
4100+ }
4101+
4102+ get pinnedRowHeight ( ) {
4103+ const containerHeight = this . pinContainer ? this . pinContainer . nativeElement . offsetHeight : 0 ;
4104+ return this . pinnedRecords . length > 0 ? containerHeight : 0 ;
4105+ }
4106+
4107+ get totalHeight ( ) {
4108+ return this . calcHeight ? this . calcHeight + this . pinnedRowHeight : this . calcHeight ;
4109+ }
4110+
4111+ get pinnedBottom ( ) {
4112+ const start = this . verticalScrollContainer . state . startIndex ;
4113+ const end = this . verticalScrollContainer . state . startIndex + this . verticalScrollContainer . state . chunkSize - 1 ;
4114+ const bottom = this . verticalScrollContainer . getScrollForIndex ( end , true ) - this . verticalScrollContainer . getScrollForIndex ( start ) ;
4115+ return bottom ;
4116+ }
4117+
39914118
39924119 /**
39934120 * Recalculates grid width/height dimensions.
@@ -4293,6 +4420,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42934420 }
42944421
42954422 this . calcHeight = this . _calculateGridBodyHeight ( ) ;
4423+ if ( this . pinnedRowHeight && this . calcHeight ) {
4424+ this . calcHeight -= this . pinnedRowHeight ;
4425+ }
42964426 }
42974427
42984428 /**
0 commit comments