feat(grids): added both side pinning samples

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

@@ -45,6 +45,7 @@ export const gridsRoutesData = {
     'grid-sample-2': { displayName: 'Grid Financial Sample', parentName: 'Grid' },
     'grid-sample-pinning': { displayName: 'Grid Header Template with Pinning', parentName: 'Grid' },
     'grid-sample-toolbar-pinning': { displayName: 'Grid Toolbar Pinning', parentName: 'Grid' },
+    'grid-toolbar-pinning-both-sides': { displayName: 'Grid Toolbar Pinning Both Sides', parentName: 'Grid' },
     'grid-sample-4': { displayName: 'Grid Remote Virtualization', parentName: 'Grid' },
     'grid-remote-filtering': { displayName: 'Grid Remote Filtering', parentName: 'Grid' },
     'grid-selection': { displayName: 'Grid Selection', parentName: 'Grid' },

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

@@ -0,0 +1,37 @@
+<div
+    [ngClass]="{ grid__wrapper: true, 'dark-theme': useDarkTheme }"
+    style="width: 100%"
+>
+    <igx-grid
+        [igxPreventDocumentScroll]="true"
+        #grid1
+        [data]="data"
+        [width]="'100%'"
+        [height]="'480px'"
+        columnSelection="multiple"
+        [pinning]="pinningConfig"
+        [moving]="true"
+    >
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-actions>
+                <button igxButton="contained" (click)="unpinColumn()"> Unpin Column </button>
+                <button igxButton="contained" (click)="pinLeft()"> Pin Left </button>
+                <button igxButton="contained" (click)="pinRight()"> Pin Right </button>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
+
+        @for (c of columns; track c) {
+        <igx-column
+            #col
+            [field]="c.field"
+            [header]="c.header"
+            [width]="c.width"
+            [pinned]="c.pinned"
+            [hidden]="c.hidden"
+            [headerClasses]="'customHeaderSyle'"
+            [pinningPosition]="c.pinningPosition"
+        >
+        </igx-column>
+        }
+    </igx-grid>
+</div>

src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.scss

@@ -0,0 +1,12 @@
+:host ::ng-deep .title {
+    width: 100%;
+}
+
+.grid__wrapper {
+    padding: 16px;
+}
+
+.button {
+    margin: 8px;
+    width: 128px;
+}

src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts

@@ -0,0 +1,90 @@
+import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core';
+import { NgClass } from '@angular/common';
+import {
+    IgxColumnComponent,
+    IgxGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarPinningComponent,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+    IgxButtonDirective,
+    IgxToggleActionDirective,
+    IgxDropDownItemNavigationDirective,
+    ColumnPinningPosition,
+    IPinningConfig
+} from 'igniteui-angular';
+import { DATA } from '../../data/customers';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    providers: [],
+    selector: 'app-grid-sample',
+    styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'],
+    templateUrl: 'grid-toolbar-pinning-both-sides.component.html',
+    imports: [
+        NgClass,
+        IgxGridComponent,
+        IgxPreventDocumentScrollDirective,
+        IgxGridToolbarComponent,
+        IgxGridToolbarActionsComponent,
+        IgxGridToolbarPinningComponent,
+        IgxColumnComponent,
+        IgxDropDownComponent,
+        IgxDropDownItemComponent,
+        IgxButtonDirective,
+        IgxToggleActionDirective,
+        IgxDropDownItemNavigationDirective
+    ]
+})
+
+export class GridBothSideToolbarPinningSampleComponent implements OnInit{
+    private activatedRoute = inject(ActivatedRoute);
+
+    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
+
+    public useDarkTheme: boolean = false;
+    public data: any[];
+    public columns: any[];
+    public pinningConfig: IPinningConfig  = { columns: ColumnPinningPosition.End };
+
+    public ngOnInit(): void {
+        this.columns = [
+            { field: 'CompanyName', header: 'Company Name', width: 300 },
+            { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.Start },
+            { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.End },
+            { field: 'Address', header: 'Address', width: 300},
+            { field: 'City', header: 'City', width: 120 },
+            { field: 'Region', header: 'Region', width: 120 },
+            { field: 'PostalCode', header: 'Postal Code', width: 150 },
+            { field: 'Phone', header: 'Phone', width: 150 },
+            { field: 'Fax', header: 'Fax', width: 150 }
+        ];
+        this.data = DATA;
+
+        this.activatedRoute.queryParams.subscribe(params => {
+            this.useDarkTheme = params.dark === 'true';
+        });
+    }
+
+    public pinLeft(){
+        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinningPosition = ColumnPinningPosition.Start;
+            col.pinned = true;
+        });
+    }
+    public pinRight(){
+        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinningPosition = ColumnPinningPosition.End;
+            col.pinned = true;
+        });
+    }
+
+    public unpinColumn(){
+        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
+        });
+    }
+}

src/app/grid/grids.routes.ts

@@ -131,6 +131,7 @@ import { GridValidatorServiceExtendedComponent } from './grid-validator-service-
 import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
 import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
 import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
+import { GridBothSideToolbarPinningSampleComponent } from './grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component';
 
 // tslint:enable:max-line-length
 
@@ -370,6 +371,11 @@ export const GridsRoutes: Routes = [
         data: gridsRoutesData['grid-sample-toolbar-pinning'],
         path: 'grid-sample-toolbar-pinning'
     },
+    {
+        component: GridBothSideToolbarPinningSampleComponent,
+        data: gridsRoutesData['grid-toolbar-pinning-both-sides'],
+        path: 'grid-toolbar-pinning-both-sides'
+    },
     {
         component: GridRemoteVirtualizationSampleComponent,
         data: gridsRoutesData['grid-sample-4'],

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

@@ -86,5 +86,6 @@ export const hierarchicalGridRoutesData = {
     'hierarchical-grid-validator-service-extended': { displayName: 'Hierarchical Grid Validator Service Extended', parentName: 'Hierarchical Grid' },
     'hGrid-columnAutosizing-sample': { displayName: 'HGrid Column Autosizing Sample', parentName: 'Hierarchical Grid' },
     'hierarchical-grid-cross-field-validation': { displayName: 'Hierarchical Grid Cross-field Validation', parentName: 'Hierarchical Grid' },
-    'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' }
+    'hierarchical-grid-summary-export': { displayName: 'Hierarchical Grid Summary Export', parentName: 'Hierarchical Grid' },
+    'hierarchical-grid-both-sides-pinning': { displayName: 'Hierarchical Grid Both Sides Pinning', parentName: 'Hierarchical Grid' }
 };

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

@@ -0,0 +1,115 @@
+<div class="grid__wrapper">
+  <igx-hierarchical-grid
+    #grid1
+    [data]="data"
+    width="100%"
+    height="480px"
+    [pinning]="pinningConfig"
+    [autoGenerate]="false"
+    columnSelection="multiple"
+    [pinning]="pinningConfig"
+    [moving]="true"
+  >
+    <igx-grid-toolbar>
+            <igx-grid-toolbar-actions>
+                <button igxButton="contained" (click)="unpinColumn()"> Unpin Column </button>
+                <button igxButton="contained" (click)="pinLeft()"> Pin Left </button>
+                <button igxButton="contained" (click)="pinRight()"> Pin Right </button>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
+
+    <igx-column field="CountryName" header="Team" width="88">
+      <ng-template igxCell let-cell="cell">
+        <div class="cell__inner country-cell">
+          <img
+            [src]="cell.row.data.CountryFlag"
+            class="country-flag"
+            #target="tooltipTarget"
+            [igxTooltipTarget]="tooltipRef"
+          />
+          <div #tooltipRef="tooltip" igxTooltip>
+            {{ cell.row.data.CountryName }}
+          </div>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Avatar" header="Photo" dataType="string" width="80" [disablePinning]="true">
+      <ng-template igxCell let-cell="cell">
+        <div class="cell__inner avatar-cell">
+          <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Name" header="Name" [disablePinning]="true"></igx-column>
+    <igx-column field="AthleteNumber" header="Number"></igx-column>
+    <igx-column field="BeatsPerMinute" header="BPM"></igx-column>
+    <igx-column field="TopSpeed" header="Top Speed"></igx-column>
+    <igx-column field="TrackProgress" header="Track Progress" [disablePinning]="true"></igx-column>
+
+    <!-- Use the value from the cell context for date pipes -->
+    <igx-column field="RegistrationDate" header="Date of Registration" width="170" [disablePinning]="true">
+      <ng-template igxCell let-value>
+        {{ value | date: 'longDate' }}
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Birthday" header="Birthday" width="170" [disablePinning]="true">
+      <ng-template igxCell let-value>
+        {{ value | date: 'longDate' }}
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Sponsor" header="Sponsor Company" width="160"></igx-column>
+
+    <igx-column #goldColumn field="FirstPlaces" header="Gold" width="110" [pinned]="true">
+      <ng-template igxHeader>
+        <div class="title-inner">
+          <span style="float: left">{{ goldColumn.header }}</span>
+          <igx-icon [style.color]="'#d2c206'">emoji_events</igx-icon>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column #silverColumn field="SecondPlaces" header="Silver" width="110" [pinned]="true">
+      <ng-template igxHeader>
+        <div class="title-inner">
+          <span style="float: left">{{ silverColumn.header }}</span>
+          <igx-icon [style.color]="'#c5c5c5'">emoji_events</igx-icon>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column #bronzeColumn field="ThirdPlaces" header="Bronze" width="110" [pinned]="true">
+      <ng-template igxHeader>
+        <div class="title-inner">
+          <span style="float: left">{{ bronzeColumn.header }}</span>
+          <igx-icon [style.color]="'#bb8b1d'">emoji_events</igx-icon>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-row-island [height]="null" [key]="'AgentData'" [autoGenerate]="false" [pinning]="pinningConfig" columnSelection="multiple">
+      <igx-column field="avatar" header="Agent's Photo" width="80">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner avatar-cell">
+            <igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="name" header="Agent"></igx-column>
+      <igx-column field="company" header="Associated Company" width="160"></igx-column>
+      <igx-column field="email" header="Work E-mail" width="250"></igx-column>
+      <igx-column field="work_phone" header="Work Phone" width="160"></igx-column>
+
+      <igx-column field="street" header="Street" width="200" [pinned]="true"></igx-column>
+      <igx-column field="city" header="City" [pinned]="true"></igx-column>
+      <igx-column field="post_code" header="Post Code"></igx-column>
+      <igx-column field="state" header="State"></igx-column>
+      <igx-column field="country" header="Country" [pinned]="true"></igx-column>
+      <igx-column field="refferred_by" header="Referred by"></igx-column>
+    </igx-row-island>
+  </igx-hierarchical-grid>
+</div>

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

@@ -0,0 +1,15 @@
+.title-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.grid__wrapper {
+    margin: 0 auto;
+    padding: 16px;
+}
+
+img.country-flag {
+    width: 35px;
+    height: 20px;
+}