Merge pull request #7076 from IgniteUI/mdragnev/fix-5640-master

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

Author: ChronosSF

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

@@ -249,6 +249,20 @@ describe('Column Pinning UI #grid', () => {
             });
         }));
 
+        it('toolbar should contain only pinnable columns', () => {
+            grid.showToolbar = true;
+            grid.columnPinning = true;
+            fix.detectChanges();
+
+            let toolbar = grid.toolbar.columnPinningUI;
+            expect(toolbar.pinnableColumns.length).toBe(5);
+
+            grid.columns[0].disablePinning = true;
+            fix.detectChanges();
+
+            toolbar = grid.toolbar.columnPinningUI;
+            expect(toolbar.pinnableColumns.length).toBe(4);
+        });
     });
 
     describe('', () => {

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;
+    }
 }