Merge pull request #5499 from IgniteUI/AMarinov/issue5421_81

fix(row-drag): un-needed horizontal scroll bar on the grid

Author: Lipata

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -3321,6 +3321,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this.rowSelectable && this.hasVisibleColumns;
     }
 
+    get showDragIcons(): boolean {
+        return this.rowDraggable && this.columns.length > this.hiddenColumnsCount;
+    }
+
     /**
      * @hidden
      */
@@ -4198,6 +4202,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
         }
 
+        if (this.showDragIcons) {
+            computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
+        }
+
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
 
 

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -240,12 +240,11 @@ describe('IgxGrid - Row Drag Tests', () => {
             grid.rowSelectable = true;
             grid.rowDraggable = true;
             fixture.detectChanges();
-            rowSelectElement = fixture.debugElement.query(By.css(CSS_CLASS_SELECTION_CHECKBOX));
-            dragIndicatorElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
             horizontalScrollbarElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR));
-            const rowSelectRect = rowSelectElement.nativeElement.getBoundingClientRect();
             horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect();
-            expect(rowSelectRect.right).toBe(horizontalScrollbarRect.left);
+
+            // The horizontal scrollbar should not be visible
+            expect(horizontalScrollbarRect.left).toBe(0);
         }));
         it('should align horizontal scrollbar with first non-pinned column when column pinning is enabled', fakeAsync(() => {
             grid.pinColumn('ProductName');
@@ -257,7 +256,9 @@ describe('IgxGrid - Row Drag Tests', () => {
             let horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect();
             let pinnedColumnHeaderElement: DebugElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_LAST_PINNED_HEADER));
             let pinnedColumnHeaderRect = pinnedColumnHeaderElement.nativeElement.getBoundingClientRect();
-            expect(pinnedColumnHeaderRect.right).toBe(horizontalScrollbarRect.left);
+
+            // The horizontal scrollbar should not be visible
+            expect(horizontalScrollbarRect.left).toBe(0);
 
             // selectable rows enabled
             grid.rowSelectable = true;