chore(*): Update hgrid row template.

Author: MKirova

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

@@ -50,7 +50,7 @@
     }
 
     @if (pinnedStartColumns.length > 0) {
-        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
+        <ng-template *ngTemplateOutlet="pinnedCellsTemplate;  context: { $implicit: this, columns: pinnedStartColumns}"></ng-template>
     }
 
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
@@ -83,7 +83,7 @@
     </ng-template>
 
     @if (pinnedEndColumns.length > 0) {
-        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
+        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns}"></ng-template>
     }
 
     <ng-template #rowSelectorBaseTemplate>
@@ -100,8 +100,8 @@
         </div>
     </ng-template>
 
-    <ng-template #pinnedCellsTemplate let-col>
-        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+    <ng-template #pinnedCellsTemplate let-col let-columns="columns">
+        @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {
             <igx-hierarchical-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
                 [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"

src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html

@@ -1,15 +1,22 @@
 <igx-hierarchical-grid [showExpandAll]="true" [data]="localData" [autoGenerate]="true" height="800px"
     width="100%" #hGrid cellSelection="none"
     primaryKey="ID"
-    [rowEditable]="true">
+    [rowEditable]="true"
+    (columnInit)="columnInit($event)">
+    <igx-grid-toolbar class="size">
+        <igx-grid-toolbar-actions>
+            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+        </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
     <igx-action-strip #actionstrip>
         <igx-grid-pinning-actions></igx-grid-pinning-actions>
         <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
     </igx-action-strip>
-    <igx-row-island #island key="childData" [autoGenerate]="true"
+    <igx-row-island #island key="childData" [autoGenerate]="true" (columnInit)="columnInit($event)"
         [allowFiltering]="true" [rowEditable]="true" primaryKey="ID">
 
-        <igx-row-island key="childData" [autoGenerate]="true"
+        <igx-row-island key="childData" [autoGenerate]="true" (columnInit)="columnInit($event)"
             [allowFiltering]="true" rowSelection="multiple" [rowEditable]="true" primaryKey="ID">
             <igx-action-strip #actionstrip2>
                 <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>

src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts

@@ -1,10 +1,11 @@
 import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
-import { IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular';
+import { ColumnPinningPosition, IColumnsAutoGeneratedEventArgs, IgxActionStripComponent, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-hierarchical-grid-add-row-sample',
     templateUrl: 'hierarchical-grid-add-row.sample.html',
-    imports: [IgxHierarchicalGridComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent]
+    imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent,
+        IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent]
 })
 export class HierarchicalGridAddRowSampleComponent implements AfterViewInit {
     public localData = [];
@@ -23,6 +24,18 @@ export class HierarchicalGridAddRowSampleComponent implements AfterViewInit {
         this.cdr.detectChanges();
     }
 
+    public columnInit(e: IgxColumnComponent) {
+        if(e.field === 'ID') {
+            e.pinningPosition = ColumnPinningPosition.End;
+            e.pinned = true;
+        }
+
+        if(e.field === 'ProductName') {
+            e.pinningPosition = ColumnPinningPosition.Start;
+            e.pinned = true;
+        }
+    }
+
     public generateDataUneven(count: number, level: number, parendID: string = null) {
         const prods = [];
         const currLevel = level;