diff --git a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts
index 99323c262..57a7c9438 100644
--- a/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts
+++ b/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts
@@ -49,12 +49,14 @@ export class GridBothSideToolbarPinningSampleComponent implements OnInit {
 
     public pinLeft() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.Start;
             col.pinned = true;
         });
     }
     public pinRight() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.End;
             col.pinned = true;
         });
diff --git a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts
index 0e2ed57e3..03230e379 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component.ts
@@ -71,6 +71,7 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
 
     public pinLeft() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.Start;
             col.pinned = true;
         });
@@ -78,6 +79,7 @@ export class HierarchicalGridBothSidePinningSampleComponent implements OnInit {
 
     public pinRight() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.End;
             col.pinned = true;
         });
diff --git a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts
index 152ae66d4..6c10d84d5 100644
--- a/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts
+++ b/src/app/tree-grid/tree-grid-sample-both-pinning/tree-grid-both-sides-pinning.component.ts
@@ -38,6 +38,7 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit {
 
     public pinLeft() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.Start;
             col.pinned = true;
         });
@@ -45,6 +46,7 @@ export class TreeGridBothSidesPinningSampleComponent implements OnInit {
 
     public pinRight() {
         this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
+            col.pinned = false;
             col.pinningPosition = ColumnPinningPosition.End;
             col.pinned = true;
         });