feat(pinning): adding live editing configs and cleaning samples

Author: ChronosSF

live-editing/configs/GridConfigGenerator.ts

@@ -880,6 +880,12 @@ export class GridConfigGenerator implements IConfigGenerator {
             appConfig: BaseAppConfig
         }));
 
+        configs.push(new Config({
+            component: 'GridBothSideToolbarPinningSampleComponent',
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'],
+            appConfig: BaseAppConfig
+        }));
+
         return configs;
     }
 }

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -654,6 +654,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             ]
         }));
 
+        configs.push(new Config({
+            component: 'HierarchicalGridBothSidePinningSampleComponent',
+            appConfig: BaseAppConfig,
+            additionalFiles: [
+                '/src/app/directives/prevent-scroll.directive.ts',
+                '/src/app/data/employeesData.ts',
+                '/src/app/data/athletesData.ts'
+            ]
+        }));
+
         return configs;
     }
 }

live-editing/configs/TreeGridConfigGenerator.ts

@@ -800,6 +800,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             ]
         }));
 
+        configs.push(new Config({
+            component: 'TreeGridBothSidesPinningSampleComponent',
+            additionalFiles: [
+                '/src/app/directives/prevent-scroll.directive.ts',
+                '/src/app/tree-grid/data/employees-flat-detailed.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
         return configs;
     }
 }

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

@@ -5,18 +5,12 @@ import {
     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,
@@ -31,54 +25,47 @@ import { ActivatedRoute } from '@angular/router';
         IgxGridToolbarComponent,
         IgxGridToolbarActionsComponent,
         IgxColumnComponent,
-        IgxButtonDirective,
-        IgxToggleActionDirective
+        IgxButtonDirective
     ]
 })
 
-export class GridBothSideToolbarPinningSampleComponent implements OnInit{
-    private activatedRoute = inject(ActivatedRoute);
-
+export class GridBothSideToolbarPinningSampleComponent implements OnInit {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
     public useDarkTheme: boolean = false;
     public data: any[];
     public columns: any[];
-    public pinningConfig: IPinningConfig  = { columns: ColumnPinningPosition.End };
+    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: '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(){
+    public pinLeft() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
             col.pinningPosition = ColumnPinningPosition.Start;
             col.pinned = true;
         });
     }
-    public pinRight(){
+    public pinRight() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
             col.pinningPosition = ColumnPinningPosition.End;
             col.pinned = true;
         });
     }
 
-    public unpinColumn(){
+    public unpinColumn() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
             col.pinned = false;
         });

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

@@ -6,19 +6,14 @@ import {
     IPinningConfig,
     IgxGridToolbarComponent,
     IgxGridToolbarActionsComponent,
-    IgxGridToolbarPinningComponent,
     IgxCellTemplateDirective,
     IgxTooltipTargetDirective,
     IgxTooltipDirective,
     IgxAvatarComponent,
     IgxCellHeaderTemplateDirective,
     IgxIconComponent,
     IgxRowIslandComponent,
-    IgxDropDownComponent,
-    IgxDropDownItemComponent,
     IgxButtonDirective,
-    IgxToggleActionDirective,
-    IgxDropDownItemNavigationDirective,
     IgxGridToolbarTitleComponent,
 } from "igniteui-angular";
 import { employeesData } from "../../data/employeesData";
@@ -56,7 +51,6 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
     public employeesData: any[];
     public columns: any[];
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
-    private _columnsPinned = true;
     public start = ColumnPinningPosition.Start;
     public end = ColumnPinningPosition.End;
 
@@ -86,22 +80,23 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
         return dateObj;
     }
 
-    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 pinLeft() {
+        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinningPosition = ColumnPinningPosition.Start;
+            col.pinned = true;
+        });
+    }
 
-        public unpinColumn(){
-            this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
-                col.pinned = false;
-            });
-        }
+    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/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts

@@ -1,67 +1,63 @@
 import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
-  ColumnPinningPosition,
-  IgxColumnComponent,
-  IgxTreeGridComponent,
-  IPinningConfig,
-  IgxGridToolbarComponent,
-  IgxGridToolbarActionsComponent,
-  IgxGridToolbarPinningComponent,
-  IgxDropDownComponent,
-  IgxDropDownItemComponent,
-  IgxButtonDirective,
-  IgxToggleActionDirective,
-  IgxDropDownItemNavigationDirective
+    ColumnPinningPosition,
+    IgxColumnComponent,
+    IgxTreeGridComponent,
+    IPinningConfig,
+    IgxGridToolbarComponent,
+    IgxGridToolbarActionsComponent,
+    IgxButtonDirective,
 } from 'igniteui-angular';
 import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
 
 @Component({
-  encapsulation: ViewEncapsulation.None,
-  providers: [],
-  selector: 'app-tree-grid-sample',
-  styleUrls: ['tree-grid-both-sides-pinning.component.scss'],
-  templateUrl: 'tree-grid-both-sides-pinning.component.html',
-  imports: [
-    IgxTreeGridComponent,
-    IgxGridToolbarComponent,
-    IgxGridToolbarActionsComponent,
-    IgxColumnComponent,
-    IgxButtonDirective
-  ]
+    encapsulation: ViewEncapsulation.None,
+    providers: [],
+    selector: 'app-tree-grid-sample',
+    styleUrls: ['tree-grid-both-sides-pinning.component.scss'],
+    templateUrl: 'tree-grid-both-sides-pinning.component.html',
+    imports: [
+        IgxTreeGridComponent,
+        IgxGridToolbarComponent,
+        IgxGridToolbarActionsComponent,
+        IgxColumnComponent,
+        IgxButtonDirective
+    ]
 })
 export class TreeGridBothSidesPinningSampleComponent implements OnInit {
-  @ViewChild('grid1', { static: true })
-  public grid1: IgxTreeGridComponent;
-  @ViewChild('pinTemplate', { read: TemplateRef, static: true })
-  public pinTemplate: TemplateRef<any>;
+    @ViewChild('grid1', { static: true })
+    public grid1: IgxTreeGridComponent;
+    @ViewChild('pinTemplate', { read: TemplateRef, static: true })
+    public pinTemplate: TemplateRef<any>;
 
-  public data: any[];
-  public columns: any[];
-  public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
-  public start = ColumnPinningPosition.Start;
-  public end = ColumnPinningPosition.End;
+    public data: any[];
+    public columns: any[];
+    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
+    public start = ColumnPinningPosition.Start;
+    public end = ColumnPinningPosition.End;
 
 
-  public ngOnInit(): void {
-    this.data = generateEmployeeDetailedFlatData();
-  }
+    public ngOnInit(): void {
+        this.data = generateEmployeeDetailedFlatData();
+    }
 
-  public pinLeft(){
-    this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
-        col.pinningPosition = ColumnPinningPosition.Start;
-        col.pinned = true;
-    });
-  }
-    public pinRight(){
+    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;
-    });
-  }
+    public unpinColumn() {
+        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
+        });
+    }
 }