chore(*): Fix overwrite position. Update generic pinned collection.

Author: MKirova

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

@@ -2256,7 +2256,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         this.grid.crudService.endEdit(false);
 
         this._pinned = true;
-        this._pinningPosition = pinningPosition;
+        if (pinningPosition !== null && pinningPosition !== undefined) {
+            // if user has set some position in the params, overwrite the column's position.
+            this._pinningPosition = pinningPosition;
+        }
+
         this.pinnedChange.emit(this._pinned);
         // it is possible that index is the last position, so will need to find target column by [index-1]
         const targetColumn = args.insertAtIndex === pinningCollection.length ?
@@ -2265,6 +2269,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         if (pinningCollection.indexOf(this) === -1) {
             if (!grid.hasColumnGroups) {
                 pinningCollection.splice(args.insertAtIndex, 0, this);
+                grid._pinnedColumns = this.grid.pinnedStartColumns.concat(this.grid.pinnedEndColumns);
             } else {
                 // insert based only on root collection
                 if (this.level === 0) {

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -33,7 +33,7 @@ <h4>Sample 1</h4>
                     <igx-column [field]="c.field" [header]="c.field" [groupable]="c.groupable"
                         [resizable]="c.resizable" width="auto" [sortable]="c.sortable" [filterable]="c.filterable"
                         [editable]="true" [hidden]="c.hidden" [hasSummary]="c.summary" [minWidth]="'150px'" [maxWidth]="'400px'"
-                        [dataType]="c.type" [pinned]='c.pinned' [hidden]='c.hidden'>
+                        [dataType]="c.type" [pinned]='c.pinned' [hidden]='c.hidden' [pinningPosition]="c.pinningPosition">
                         <ng-template igxCell let-cell="cell">
                             @if (show) {
                                 <div>{{ cell.value}}</div>

src/app/grid-column-moving/grid-column-moving.sample.ts

@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { SAMPLE_DATA } from '../shared/sample-data';
 
-import { IgxButtonDirective, IgxButtonGroupComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPaginatorComponent } from 'igniteui-angular';
+import { ColumnPinningPosition, IgxButtonDirective, IgxButtonGroupComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPaginatorComponent } from 'igniteui-angular';
 
 @Component({
     providers: [],
@@ -76,11 +76,11 @@ export class GridColumnMovingSampleComponent implements OnInit {
             { field: 'ID', width: 150, resizable: true, sortable: false, filterable: true, groupable: true,
                 summary: true, type: 'string', pinned: false, hidden: true },
             { field: 'CompanyName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
-                summary: true, type: 'string'},
+                summary: true, type: 'string', pinned: true , pinningPosition: ColumnPinningPosition.End},
             { field: 'ContactName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
                 summary: true, type: 'string' },
             { field: 'ContactTitle', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
-                summary: true, type: 'string' },
+                summary: true, type: 'string', pinningPosition: ColumnPinningPosition.End },
             { field: 'Address', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
                 summary: true, type: 'string' },
             { field: 'City', width: 150, resizable: true, sortable: false, filterable: false, groupable: true,