feat(igxGrid): column moving initial integration #935

Author: SAndreeva

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -193,6 +193,10 @@
         @extend %grid__drag-ghost-image !optional;
     }
 
+    @include e(drag-ghost-group-image) {
+        @extend %grid__drag-ghost-group-image !optional;
+    }
+
     @include e(drag-ghost-image-icon) {
         @extend %grid__drag-ghost-image-icon !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -578,21 +578,35 @@
         color: --var($theme, 'ghost-header-text-color');
         position: absolute;
         z-index: 20;
-        height: auto;
         top: -99999px;
         left: -99999px;
         overflow: visible;
+        display: table;
         box-shadow: igx-elevation($elevations, 5);
 
         %grid-cell-header-title {
             min-width: rem(24px);
         }
     }
 
+    %grid__drag-ghost-group-image {
+        background-color: --var($theme, 'ghost-header-background');
+        color: --var($theme, 'ghost-header-text-color');
+        box-shadow: igx-elevation($elevations, 5);
+        display: table;
+        padding: map-get($grid-cell-padding, 'comfortable');
+
+        %grid-cell-header-title {
+            min-width: rem(24px);
+        }
+    }
+
     %grid__drag-ghost-image-icon {
         color: --var($theme, 'ghost-header-icon-color');
         font-size: rem(24px);
         margin-right: rem(8);
+        justify-content: center;
+        align-items: center;
     }
 
     %igx-grid__drag-col-header {

projects/igniteui-angular/src/lib/grid/grid-header.component.html

@@ -3,12 +3,16 @@
 </ng-template>
 
 <ng-container *ngIf="column.columnGroup">
+    <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left">
+    </span>
     <div style="display: block; height: 50px; text-align: center; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;">{{ column.header }}</div>
     <div style="display: flex; flex-flow: row;">
         <ng-container *ngFor="let child of column.children">
-            <igx-grid-header *ngIf="!child.hidden" [gridID]="column.gridID" [column]="child" [style.min-width.px]="child.width" [style.flex-basis.px]='child.width'></igx-grid-header>
+            <igx-grid-header [igxColumnMovingDrag]="child" [attr.droppable]="true" [igxColumnMovingDrop]="child" *ngIf="!child.hidden" [gridID]="column.gridID" [column]="child" [style.min-width.px]="child.width" [style.flex-basis.px]='child.width'></igx-grid-header>
         </ng-container>
     </div>
+    <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
+    </span>
 </ng-container>
 <ng-container *ngIf="!column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left">
@@ -17,27 +21,28 @@
         <ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column }">
         </ng-container>
     </span>
-</ng-container>
+    <div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
+        <igx-icon class="sort-icon" *ngIf="column.sortable">{{sortingIcon}}</igx-icon>
+        <igx-grid-filter [column]="column" *ngIf="column.filterable"></igx-grid-filter>
+    </div>
 
-<div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
-    <igx-icon class="sort-icon" *ngIf="column.sortable">{{sortingIcon}}</igx-icon>
-    <igx-grid-filter [column]="column" *ngIf="column.filterable"></igx-grid-filter>
-</div>
+    <span *ngIf="!column.columnGroup" id="resizeHandler" [style.cursor]="resizeCursor" #resizeArea
+        class="igx-grid__th-resize-handle"
+        (dblclick)="onResizeAreaDblClick()">
 
-<span *ngIf="!column.columnGroup" [style.cursor]="resizeCursor" #resizeArea
-    class="igx-grid__th-resize-handle"
-    (dblclick)="onResizeAreaDblClick()">
+        <div *ngIf="showResizer" igxResizer
+            class="igx-grid__th-resize-line"
+            [style.height.px]="resizerHeight"
+            [restrictHResizeMax]="restrictResizeMax"
+            [restrictHResizeMin]="restrictResizeMin"
+            [resizeEndTimeout]="resizeEndTimeout"
+            (resizeEnd)="onResize($event)">
+        </div>
 
-    <div *ngIf="showResizer" igxResizer
-        class="igx-grid__th-resize-line"
-        [style.height.px]="resizerHeight"
-        [restrictHResizeMax]="restrictResizeMax"
-        [restrictHResizeMin]="restrictResizeMin"
-        [resizeEndTimeout]="resizeEndTimeout"
-        (resizeEnd)="onResize($event)">
-    </div>
+    </span>
+
+    <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
+    </span>
+</ng-container>
 
-</span>
 
-<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
-</span>

projects/igniteui-angular/src/lib/grid/grid.common.ts

@@ -251,9 +251,10 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
     }
 
     public onPointerDown(event) {
+        event.stopPropagation();
 
-        const resizeArea = document.elementFromPoint(event.pageX, event.pageY);
-        if (!this.draggable || this.element.nativeElement.children[3].isEqualNode(resizeArea)) {
+        const el = document.elementFromPoint(event.pageX, event.pageY);
+        if (!this.draggable || el.getAttribute("id") === "resizeHandler") {
             return;
         }
 
@@ -270,6 +271,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
     }
 
     public onPointerMove(event) {
+        event.preventDefault();
 
         if (!this.draggable) {
             return;
@@ -296,7 +298,9 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
 
     protected createDragGhost(event) {
         super.createDragGhost(event);
-        this._dragGhost.removeChild(this._dragGhost.children[2]);
+
+        this._dragGhost.style.minWidth = null;
+        this._dragGhost.style.flexBasis  = null;
 
         const icon = document.createElement('i');
         const text = document.createTextNode('swap_horiz');
@@ -305,25 +309,23 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
         icon.classList.add('material-icons');
         this.renderer.addClass(icon, this._dragGhostImgIconClass);
 
-        this._dragGhost.insertBefore(icon, this._dragGhost.children[1]);
-
         this.cms.icon = icon;
 
-        this._dragGhost.style.minWidth = null;
-        this._dragGhost.style.flexBasis  = null;
-
-        const range = document.createRange();
-        range.selectNodeContents(this._dragGhost.children[2]);
+        if (!this.column.columnGroup) {
+            this._dragGhost.removeChild(this._dragGhost.children[2]);
+            this._dragGhost.insertBefore(icon, this._dragGhost.children[1]);
 
-        const s = document.defaultView.getComputedStyle(this.element.nativeElement);
-        this._dragGhost.style.width = Math.ceil(range.getBoundingClientRect().width +
-            parseFloat(s.borderRightWidth) + parseFloat(s.borderLeftWidth) + parseFloat(s.paddingLeft) +
-            parseFloat(s.paddingRight) + icon.getBoundingClientRect().width) +
-            parseFloat(document.defaultView.getComputedStyle(icon).marginRight) + 'px';
+            this.left = this._dragStartX = event.clientX - ((this._dragGhost.getBoundingClientRect().width / 3) * 2);
+            this.top = this._dragStartY = event.clientY - ((this._dragGhost.getBoundingClientRect().height / 3) * 2);
+        } else {
+            this._dragGhost.removeChild(this._dragGhost.children[2]);
+            this._dragGhost.removeChild(this._dragGhost.children[0]);
+            this._dragGhost.removeChild(this._dragGhost.children[this._dragGhost.children.length - 1]);
+            this.renderer.addClass(this._dragGhost.children[0], 'igx-grid__drag-ghost-group-image');
 
-        this.left = this._dragStartX = event.clientX -
-            (((range.getBoundingClientRect().width + parseFloat(s.paddingLeft) + parseFloat(s.paddingRight)) / 3) * 2);
-        this.top = this._dragStartY = event.clientY - ((parseFloat(s.height) / 3) * 2);
+            this.left = this._dragStartX = event.clientX - ((this._dragGhost.getBoundingClientRect().width / 3) * 2);
+            this.top = this._dragStartY = event.clientY - ((this._dragGhost.getBoundingClientRect().height / 3) * 2);
+        }
     }
 }
 
@@ -372,7 +374,10 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
     }
 
     public onDragEnter(event) {
-        if (this.isDropTarget && this.cms.column !== this.column) {
+        if (this.isDropTarget &&
+            this.cms.column !== this.column &&
+            this.cms.column.level === this.column.level &&
+            this.cms.column.parent === this.column.parent) {
             const args = {
                 source: this.cms.column,
                 target: this.column,
@@ -386,8 +391,8 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
             }
 
             if (!this.column.pinned || (this.column.pinned && this.cms.column.pinned)) {
-                this._dropIndicator = this.cms.column.index < this.column.index ? this.elementRef.nativeElement.children[4] :
-                    this.elementRef.nativeElement.children[0];
+                this._dropIndicator = this.cms.column.index < this.column.index ? this.elementRef.nativeElement.lastElementChild :
+                    this.elementRef.nativeElement.firstElementChild;
 
                 this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass);
 
@@ -398,16 +403,16 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
                 const nextPinnedWidth = this.column.grid.getPinnedWidth() + parseFloat(this.cms.column.width);
 
                 if (nextPinnedWidth <= this.column.grid.calcPinnedContainerMaxWidth) {
-                    this._dropIndicator = this.elementRef.nativeElement.children[0];
-                    this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass);
-
                     this.cms.icon.innerText = 'lock';
+
+                    this._dropIndicator = this.elementRef.nativeElement.firstElementChild;
+                    this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass);
                 } else {
                     this.cms.icon.innerText = 'block';
                 }
             }
         } else {
-            this.cms.icon.innerText = 'swap_horiz';
+            this.cms.icon.innerText = 'block';
         }
 
         if (this.horizontalScroll) {
@@ -462,8 +467,10 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
                 nextPinnedWidth = this.column.grid.getPinnedWidth() + parseFloat(this.cms.column.width);
             }
 
-            if (args.cancel || (nextPinnedWidth && nextPinnedWidth > this.column.grid.calcPinnedContainerMaxWidth)) {
-                return;
+            if (args.cancel || (nextPinnedWidth && nextPinnedWidth > this.column.grid.calcPinnedContainerMaxWidth) ||
+                this.column.level !== this.cms.column.level ||
+                this.column.parent !== this.cms.column.parent) {
+                    return;
             }
 
             this.column.grid.moveColumn(this.cms.column, this.column);

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

@@ -2,13 +2,13 @@
     <app-page-header title="Grid Column Groups"></app-page-header>
     <section class="sample-content">
         <igx-grid [rowSelectable]="false" #grid height="600px" [data]="data" displayDensity="compact">
-            <igx-column [pinned]="true" field="Missing"></igx-column>
-            <igx-column field="ID"></igx-column>
-            <igx-column-group [pinned]="true" header="General Information">
-                <igx-column filterable="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
-                <igx-column-group header="Person Details">
-                    <igx-column [pinned]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
-                    <igx-column filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
+            <igx-column [movable]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column>
+            <igx-column [movable]="true" [resizable]="true" field="ID"></igx-column>
+            <igx-column-group [movable]="true" [pinned]="true" header="General Information">
+                <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
+                <igx-column-group [movable]="true" header="Person Details">
+                    <igx-column [movable]="true" [pinned]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
+                    <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
                 </igx-column-group>
             </igx-column-group>
             <igx-column-group header="Address Information">

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

@@ -385,7 +385,7 @@ export class GridColumnMovingSampleComponent implements OnInit {
 
     toggleColumn(name: string) {
         const col = this.grid1.getColumnByName(name);
-        col.pinned ? col.unpin() : col.pin();
+        col.pinned ? col.pinned = false : col.pinned = true;
     }
 
     onColumnMovingStart(event) {