From 14b18891f526ca3196adcbdc751c1cb6b5c4b8d5 Mon Sep 17 00:00:00 2001 From: tishko0 Date: Mon, 27 Oct 2025 14:14:02 +0200 Subject: [PATCH 1/5] fix(sample): fix pin buttons to update pin state --- .../grid-toolbar-pinning-both-sides.component.ts | 2 ++ .../hierarchical-grid-both-sides-pinning.component.ts | 2 ++ .../tree-grid-both-sides-pinning.component.ts | 2 ++ 3 files changed, 6 insertions(+) diff --git a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts index 0cf523dd1..92b91a45f 100644 --- a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts +++ b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts @@ -54,12 +54,14 @@ export class GridBothSideToolbarPinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.Start; col.pinned = true; }); } public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.End; col.pinned = true; }); diff --git a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts index 3fc88fd61..403c2265f 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts @@ -82,6 +82,7 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.Start; col.pinned = true; }); @@ -89,6 +90,7 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit { public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.End; col.pinned = true; }); diff --git a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts index 3aa89d085..b2884df23 100644 --- a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts +++ b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts @@ -43,6 +43,7 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.Start; col.pinned = true; }); @@ -50,6 +51,7 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit { public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.pinned = false; col.pinningPosition = ColumnPinningPosition.End; col.pinned = true; }); From d1a05a058d4af91f82795f4542513199b02ac44c Mon Sep 17 00:00:00 2001 From: Bozhidara Pachilova Date: Tue, 13 Jan 2026 17:09:35 +0200 Subject: [PATCH 2/5] fix(lob): import IgxCategoryChartModule instead of core --- projects/app-lob/src/app/grid-finjs/main.component.ts | 4 ++-- .../grid/grid-master-detail/grid-master-detail.component.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/app-lob/src/app/grid-finjs/main.component.ts b/projects/app-lob/src/app/grid-finjs/main.component.ts index 5a7fff001..dddd8239c 100644 --- a/projects/app-lob/src/app/grid-finjs/main.component.ts +++ b/projects/app-lob/src/app/grid-finjs/main.component.ts @@ -3,7 +3,7 @@ import { Router } from '@angular/router'; import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog'; import { IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular/directives'; -import { IgxCategoryChartComponent, IgxCategoryChartCoreModule } from 'igniteui-angular-charts'; +import { IgxCategoryChartComponent, IgxCategoryChartModule } from 'igniteui-angular-charts'; import { Stock } from '../data/financialData'; import { ControllerComponent } from './controllers.component'; import { GridFinJSComponent } from './grid-finjs.component'; @@ -12,7 +12,7 @@ import { GridFinJSComponent } from './grid-finjs.component'; selector: 'app-finjs-main', styleUrls: ['./main.component.scss'], templateUrl: './main.component.html', - imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartCoreModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective] + imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective] }) export class FinJSDemoComponent implements OnDestroy, AfterViewInit { @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent; diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts index d11be71da..727a766af 100644 --- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts +++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts @@ -5,7 +5,7 @@ import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxDividerDirective } from 'igniteui-angular/directives'; -import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule } from 'igniteui-angular-charts'; +import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; import { employeesData } from '../../data/employeesData'; import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; @@ -13,7 +13,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir selector: 'app-grid-master-detail', styleUrls: ['./grid-master-detail.component.scss'], templateUrl: 'grid-master-detail.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] }) export class GridMasterDetailSampleComponent { From 6904863d5a86d6858faa22aa2e7aa55ea2f57237 Mon Sep 17 00:00:00 2001 From: tishko0 Date: Tue, 20 Jan 2026 10:01:47 +0200 Subject: [PATCH 3/5] refactor(sample): Changed pin methods to use api instead --- ...grid-toolbar-pinning-both-sides.component.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts index 92b91a45f..c26c7b839 100644 --- a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts +++ b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts @@ -54,22 +54,25 @@ export class GridBothSideToolbarPinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.Start; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); }); } + public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.End; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); }); } public unpinColumn() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; + col.unpin(); }); } } From 963563ea849df64a687dab73a3d0b538861ccae6 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 22 Jan 2026 16:08:53 +0200 Subject: [PATCH 4/5] chore(both-side-pin): add data for Region field --- src/app/data/customers.ts | 48 +++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/app/data/customers.ts b/src/app/data/customers.ts index 1f6b5efd3..b17d30728 100644 --- a/src/app/data/customers.ts +++ b/src/app/data/customers.ts @@ -7,7 +7,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "Obere Str. 57", City: "Berlin", - Region: null, + Region: "East", PostalCode: "12209", Country: "Germany", Phone: "030-0074321", @@ -19,7 +19,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "Avda. de la Constitución 2222", City: "México D.F.", - Region: null, + Region: "South", PostalCode: "05021", Country: "Mexico", Phone: "(5) 555-4729", @@ -31,7 +31,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "Mataderos 2312", City: "México D.F.", - Region: null, + Region: "South", PostalCode: "05023", Country: "Mexico", Phone: "(5) 555-3932", @@ -43,7 +43,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "120 Hanover Sq.", City: "London", - Region: null, + Region: "East", PostalCode: "WA1 1DP", Country: "UK", Phone: "(171) 555-7788", @@ -55,7 +55,7 @@ export const DATA = [ ContactTitle: "Order Administrator", Address: "Berguvsvägen 8", City: "Luleå", - Region: null, + Region: "South", PostalCode: "S-958 22", Country: "Sweden", Phone: "0921-12 34 65", @@ -67,7 +67,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "Forsterstr. 57", City: "Mannheim", - Region: null, + Region: "East", PostalCode: "68306", Country: "Germany", Phone: "0621-08460", @@ -79,7 +79,7 @@ export const DATA = [ ContactTitle: "Marketing Manager", Address: "24, place Kléber", City: "Strasbourg", - Region: null, + Region: "East", PostalCode: "67000", Country: "France", Phone: "88.60.15.31", @@ -91,7 +91,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "C/ Araquil, 67", City: "Madrid", - Region: null, + Region: "East", PostalCode: "28023", Country: "Spain", Phone: "(91) 555 22 82", @@ -103,7 +103,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "12, rue des Bouchers", City: "Marseille", - Region: null, + Region: "West", PostalCode: "13008", Country: "France", Phone: "91.24.45.40", @@ -127,7 +127,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "Fauntleroy Circus", City: "London", - Region: null, + Region: "South", PostalCode: "EC2 5NT", Country: "UK", Phone: "(171) 555-1212", @@ -139,7 +139,7 @@ export const DATA = [ ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires", - Region: null, + Region: "East", PostalCode: "1010", Country: "Argentina", Phone: "(1) 135-5555", @@ -151,7 +151,7 @@ export const DATA = [ ContactTitle: "Marketing Manager", Address: "Sierras de Granada 9993", City: "México D.F.", - Region: null, + Region: "South", PostalCode: "05022", Country: "Mexico", Phone: "(5) 555-3392", @@ -163,7 +163,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "Hauptstr. 29", City: "Bern", - Region: null, + Region: "East", PostalCode: "3012", Country: "Switzerland", Phone: "0452-076545", @@ -187,7 +187,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "Berkeley Gardens 12 Brewery", City: "London", - Region: null, + Region: "South", PostalCode: "WX1 6LT", Country: "UK", Phone: "(171) 555-2282", @@ -199,7 +199,7 @@ export const DATA = [ ContactTitle: "Order Administrator", Address: "Walserweg 21", City: "Aachen", - Region: null, + Region: "South", PostalCode: "52066", Country: "Germany", Phone: "0241-039123", @@ -211,7 +211,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "67, rue des Cinquante Otages", City: "Nantes", - Region: null, + Region: "East", PostalCode: "44000", Country: "France", Phone: "40.67.88.88", @@ -223,7 +223,7 @@ export const DATA = [ ContactTitle: "Sales Agent", Address: "35 King George", City: "London", - Region: null, + Region: "East", PostalCode: "WX3 6FW", Country: "UK", Phone: "(171) 555-0297", @@ -235,7 +235,7 @@ export const DATA = [ ContactTitle: "Sales Manager", Address: "Kirchgasse 6", City: "Graz", - Region: null, + Region: "South", PostalCode: "8010", Country: "Austria", Phone: "7675-3425", @@ -259,7 +259,7 @@ export const DATA = [ ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86", City: "Madrid", - Region: null, + Region: "East", PostalCode: "28034", Country: "Spain", Phone: "(91) 555 94 44", @@ -271,7 +271,7 @@ export const DATA = [ ContactTitle: "Assistant Sales Agent", Address: "184, chaussée de Tournai", City: "Lille", - Region: null, + Region: "South", PostalCode: "59000", Country: "France", Phone: "20.16.10.16", @@ -283,7 +283,7 @@ export const DATA = [ ContactTitle: "Owner", Address: "Åkergatan 24", City: "Bräcke", - Region: null, + Region: "East", PostalCode: "S-844 67", Country: "Sweden", Phone: "0695-34 67 21", @@ -295,7 +295,7 @@ export const DATA = [ ContactTitle: "Marketing Manager", Address: "Berliner Platz 43", City: "München", - Region: null, + Region: "East", PostalCode: "80805", Country: "Germany", Phone: "089-0877310", @@ -307,7 +307,7 @@ export const DATA = [ ContactTitle: "Marketing Manager", Address: "54, rue Royale", City: "Nantes", - Region: null, + Region: "South", PostalCode: "44000", Country: "France", Phone: "40.32.21.21", @@ -319,7 +319,7 @@ export const DATA = [ ContactTitle: "Sales Representative", Address: "Via Monte Bianco 34", City: "Torino", - Region: null, + Region: "East", PostalCode: "10100", Country: "Italy", Phone: "011-4988260", From b86582eb89a6e20179e9498997fdcfbb09e29b62 Mon Sep 17 00:00:00 2001 From: tishko0 Date: Thu, 22 Jan 2026 16:18:13 +0200 Subject: [PATCH 5/5] fix(sample): added pining via pai for hgrid & tgrid --- ...archical-grid-both-sides-pinning.component.ts | 16 +++++++++------- .../tree-grid-both-sides-pinning.component.ts | 16 +++++++++------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts index 03230e379..63c620b5d 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts @@ -71,23 +71,25 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.Start; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); }); } public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.End; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); }); } public unpinColumn() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; + col.unpin(); }); } } diff --git a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts index 6c10d84d5..c212b6181 100644 --- a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts +++ b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts @@ -38,23 +38,25 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit { public pinLeft() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.Start; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); }); } public pinRight() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; - col.pinningPosition = ColumnPinningPosition.End; - col.pinned = true; + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); }); } public unpinColumn() { this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { - col.pinned = false; + col.unpin(); }); } }