fix(igxGrid): List only pinnable columns in pinning toolbar #5640

Author: Martin Dragnev

projects/igniteui-angular/src/lib/grids/pinning/column-pinning.component.html

@@ -14,7 +14,7 @@ <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
 <div class="igx-column-hiding__columns"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox igxColumnPinningItem
-        *ngFor="let columnItem of columnItems"
+        *ngFor="let columnItem of pinnableColumns"
         class="igx-column-hiding__columns-item"
         (change)="checkboxValueChange($event, columnItem)"
         [checked]="columnItem.value">

projects/igniteui-angular/src/lib/grids/pinning/column-pinning.component.ts

@@ -39,5 +39,12 @@ export class IgxColumnPinningComponent extends ColumnChooserBaseDirective {
         }
         columnItem.value = !columnItem.value;
     }
+
+    /**
+     * @hidden @internal
+     */
+    public get pinnableColumns() {
+        return this.columnItems.filter((col) => !col.pinningDisabled);
+    }
 }
 

projects/igniteui-angular/src/lib/grids/pinning/pinning.directive.ts

@@ -22,4 +22,10 @@ export class IgxColumnPinningItemDirective extends ColumnChooserItemBaseDirectiv
     get pinnable() {
         return this.column.pinnable;
     }
+    /**
+     * Returns whether a column have pinning enabled
+     */
+    public get pinningDisabled() {
+        return this.column.disablePinning;
+    }
 }