feat(grid): enhance toolbar with titles and update pinning positions

Author: tishko0

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

@@ -30,13 +30,9 @@ import { ActivatedRoute } from '@angular/router';
         IgxPreventDocumentScrollDirective,
         IgxGridToolbarComponent,
         IgxGridToolbarActionsComponent,
-        IgxGridToolbarPinningComponent,
         IgxColumnComponent,
-        IgxDropDownComponent,
-        IgxDropDownItemComponent,
         IgxButtonDirective,
-        IgxToggleActionDirective,
-        IgxDropDownItemNavigationDirective
+        IgxToggleActionDirective
     ]
 })
 

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

@@ -11,6 +11,7 @@
     [moving]="true"
   >
     <igx-grid-toolbar>
+        <igx-grid-toolbar-title>Hierarchical Grid</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <button igxButton="contained" (click)="unpinColumn()"> Unpin Column </button>
                 <button igxButton="contained" (click)="pinLeft()"> Pin Left </button>
@@ -90,7 +91,13 @@
       </ng-template>
     </igx-column>
 
-    <igx-row-island [height]="null" [key]="'AgentData'" [autoGenerate]="false" [pinning]="pinningConfig" columnSelection="multiple">
+    <igx-row-island [height]="null" [key]="'AgentData'" [moving]="true" [autoGenerate]="false" [pinning]="pinningConfig" columnSelection="multiple">
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-title>Agent Data</igx-grid-toolbar-title>
+            <igx-grid-toolbar-actions>
+                <button igxButton="contained">Add Agent</button>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
       <igx-column field="avatar" header="Agent's Photo" width="80">
         <ng-template igxCell let-cell="cell">
           <div class="cell__inner avatar-cell">
@@ -104,7 +111,7 @@
       <igx-column field="email" header="Work E-mail" width="250"></igx-column>
       <igx-column field="work_phone" header="Work Phone" width="160"></igx-column>
 
-      <igx-column field="street" header="Street" width="200" [pinned]="true"></igx-column>
+      <igx-column field="street" header="Street" width="200" [pinned]="true" [pinningPosition]="start"></igx-column>
       <igx-column field="city" header="City" [pinned]="true"></igx-column>
       <igx-column field="post_code" header="Post Code"></igx-column>
       <igx-column field="state" header="State"></igx-column>

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

@@ -19,6 +19,7 @@ import {
     IgxButtonDirective,
     IgxToggleActionDirective,
     IgxDropDownItemNavigationDirective,
+    IgxGridToolbarTitleComponent,
 } from "igniteui-angular";
 import { employeesData } from "../../data/employeesData";
 import { athletesData } from "../../data/athletesData";
@@ -34,7 +35,6 @@ import { DatePipe } from "@angular/common";
         IgxHierarchicalGridComponent,
         IgxGridToolbarComponent,
         IgxGridToolbarActionsComponent,
-        IgxGridToolbarPinningComponent,
         IgxColumnComponent,
         IgxCellTemplateDirective,
         IgxTooltipTargetDirective,
@@ -44,12 +44,9 @@ import { DatePipe } from "@angular/common";
         IgxIconComponent,
         IgxRowIslandComponent,
         DatePipe,
-        IgxDropDownComponent,
-        IgxDropDownItemComponent,
         IgxButtonDirective,
-        IgxToggleActionDirective,
-        IgxDropDownItemNavigationDirective,
-    ],
+        IgxGridToolbarTitleComponent
+    ]
 })
 export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
     @ViewChild("grid1", { static: true })
@@ -60,6 +57,8 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
     public columns: any[];
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
     private _columnsPinned = true;
+    public start = ColumnPinningPosition.Start;
+    public end = ColumnPinningPosition.End;
 
     public ngOnInit(): void {
         this.data = athletesData;
@@ -79,30 +78,6 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
         });
     }
 
-    // Toggle individual column pin state (unchanged)
-    public toggleColumn(col: IgxColumnComponent): void {
-        col.pinned ? col.unpin() : col.pin();
-    }
-
-    // NEW: Set global pinning position via toolbar dropdown
-    public setPinningPosition(side: "start" | "end"): void {
-        const pos =
-            side === "start"
-                ? ColumnPinningPosition.Start
-                : ColumnPinningPosition.End;
-
-        // Reassign a new object so change detection updates both grid and row island
-        this.pinningConfig = { columns: pos };
-    }
-
-    public get columnsPinned(): boolean {
-        return this._columnsPinned;
-    }
-
-    public set columnsPinned(pinned) {
-        this._columnsPinned = !this._columnsPinned;
-    }
-
     private generateReadableDate(timestamp: string): Date {
         let dateObj = new Date(timestamp);
         if (isNaN(dateObj.getTime())) {

src/app/lists/combo/combo-features/combo-features.component.html

@@ -1,7 +1,7 @@
 
 <igx-combo #combo class="combo" [data]="lData" [displayKey]="'field'" [valueKey]="'field'"
     placeholder="Location(s)" searchPlaceholder="Search..." [allowCustomValues]="customValues"
-    (addition)="handleAddition($event)" [filteringOptions]="{ filterable }"
+    (addition)="handleAddition($event)"
     [showSearchCaseIcon]="showSearchCaseIcon" [itemsMaxHeight]="255" [disabled]="disabled">
 </igx-combo>
 

src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.html

@@ -21,8 +21,8 @@
         </igx-grid-toolbar>
     </igx-grid-toolbar>
 
-    <igx-column [field]="'Name'" dataType="string" width="250px" [disablePinning]="true"></igx-column>
-    <igx-column [field]="'Title'" dataType="string" width="250px" [pinned]="true"></igx-column>
+    <igx-column [field]="'Name'" dataType="string" width="250px" [pinned]="true" [pinningPosition]="start"></igx-column>
+    <igx-column [field]="'Title'" dataType="string" width="250px" [pinned]="true" [pinningPosition]="end"></igx-column>
     <igx-column [field]="'ID'" dataType="number" width="100px"></igx-column>
     <igx-column [field]="'HireDate'" header="Hire Date" dataType="date" width="200px"></igx-column>
     <igx-column [field]="'Age'" dataType="number" width="200px"></igx-column>

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

@@ -38,30 +38,14 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit {
   public data: any[];
   public columns: any[];
   public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
+  public start = ColumnPinningPosition.Start;
+  public end = ColumnPinningPosition.End;
 
-  private _columnsPinned = true;
 
   public ngOnInit(): void {
     this.data = generateEmployeeDetailedFlatData();
   }
 
-  public toggleColumnPinning(col: IgxColumnComponent): void {
-    col.pinned ? col.unpin() : col.pin();
-  }
-
-  public setPinningPosition(side: 'start' | 'end'): void {
-    const pos = side === 'start' ? ColumnPinningPosition.Start : ColumnPinningPosition.End;
-    this.pinningConfig = { columns: pos };
-  }
-
-  public get columnsPinned(): boolean {
-    return this._columnsPinned;
-  }
-
-  public set columnsPinned(pinned) {
-    this._columnsPinned = !this._columnsPinned;
-  }
-
   public pinLeft(){
     this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
         col.pinningPosition = ColumnPinningPosition.Start;