From 70184adba9307e7b2add06cad43514c357808880 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 8 Aug 2025 14:37:56 +0300 Subject: [PATCH 1/2] fix(grid-pinning): custom pin icon not showing in styling sample Closes #3661 --- .../grid-pinning-styling.component.ts | 71 +++++++++++++------ 1 file changed, 50 insertions(+), 21 deletions(-) diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts index 0b90ba54fb..532c67112d 100644 --- a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts +++ b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts @@ -1,33 +1,62 @@ -import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core'; -import { IgxColumnComponent, IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; -import { DATA } from '../../data/customers'; -import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; - +import { Component, ViewChild, OnInit, inject } from "@angular/core"; +import { + IgxColumnComponent, + IgxGridComponent, + IgxCellHeaderTemplateDirective, + IgxIconComponent, + IgxIconService, +} from "igniteui-angular"; +import { DATA } from "../../data/customers"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; @Component({ - selector: 'app-grid-sample', - styleUrls: ['grid-pinning-styling.component.scss'], - templateUrl: 'grid-pinning-styling.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] + selector: "app-grid-sample", + styleUrls: ["grid-pinning-styling.component.scss"], + templateUrl: "grid-pinning-styling.component.html", + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxCellHeaderTemplateDirective, + IgxIconComponent, + ], }) +export class PinningStylingComponent implements OnInit { + private iconService = inject(IgxIconService); + @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; -export class PinningStylingComponent implements OnInit{ - @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + constructor() { + this.iconService.setFamily("fas", { + className: "fas", + type: "font", + prefix: "fa-", + }); + } public data: any[]; public columns: any[]; public ngOnInit(): void { this.columns = [ - { field: 'ID', header: 'ID', width: 100, hidden: true }, - { field: 'CompanyName', header: 'Company Name', width: 300 }, - { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true }, - { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true }, - { 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 } + { field: "ID", header: "ID", width: 100, hidden: true }, + { field: "CompanyName", header: "Company Name", width: 300 }, + { + field: "ContactName", + header: "Contact Name", + width: 200, + pinned: true, + }, + { + field: "ContactTitle", + header: "Contact Title", + width: 200, + pinned: true, + }, + { 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; } From dfc6e2452269d4d38988be077ef0c8b942502b35 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 8 Aug 2025 14:44:52 +0300 Subject: [PATCH 2/2] lint(grid-pinning): fix errors --- .../grid-pinning-styling.component.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts index 532c67112d..60f97787b0 100644 --- a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts +++ b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts @@ -4,7 +4,7 @@ import { IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, - IgxIconService, + IgxIconService } from "igniteui-angular"; import { DATA } from "../../data/customers"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; @@ -18,8 +18,8 @@ import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scro IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, - IgxIconComponent, - ], + IgxIconComponent + ] }) export class PinningStylingComponent implements OnInit { private iconService = inject(IgxIconService); @@ -29,7 +29,7 @@ export class PinningStylingComponent implements OnInit { this.iconService.setFamily("fas", { className: "fas", type: "font", - prefix: "fa-", + prefix: "fa-" }); } @@ -43,20 +43,20 @@ export class PinningStylingComponent implements OnInit { field: "ContactName", header: "Contact Name", width: 200, - pinned: true, + pinned: true }, { field: "ContactTitle", header: "Contact Title", width: 200, - pinned: true, + pinned: true }, { 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 }, + { field: "Fax", header: "Fax", width: 150 } ]; this.data = DATA; }