diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts index 8c70878e74b9..3ba6b6c22f45 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts @@ -2095,3 +2095,24 @@ test('Warning should not be thrown if scrolling is virtual and height is specifi }); }); }); + +// T1326460 +test('Horizontal scrollbar should not appear when columnHidingEnabled is true and vertical scrollbar is present (T1326460)', async (t) => { + const dataGrid = new DataGrid('#container'); + + await t.expect(dataGrid.isReady()).ok(); + + const scrollContainerWidth = await dataGrid.getScrollContainer().clientWidth; + const rowsWidth = await dataGrid.getRows().nth(0).clientWidth; + + await t.expect(rowsWidth).eql(scrollContainerWidth); +}).before(async () => createWidget('dxDataGrid', { + width: 552, + height: 300, + dataSource: getData(20, 10), + columnHidingEnabled: true, + columnWidth: 100, + scrolling: { + useNative: true, + }, +})); diff --git a/packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts b/packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts index 1ffe353d8610..a6c3c72de494 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts @@ -116,7 +116,7 @@ export class AdaptiveColumnsController extends modules.ViewController { private _form?: Form; - private _hidingColumnsQueue: any; + private _hidingColumnsQueue?: Column[]; protected _keyboardNavigationController!: KeyboardNavigationController; @@ -616,39 +616,41 @@ export class AdaptiveColumnsController extends modules.ViewController { return editMode === EDIT_MODE_FORM || editMode === EDIT_MODE_POPUP; } - public hideRedundantColumns(resultWidths, visibleColumns, hiddenQueue) { - const that = this; - + public hideRedundantColumns( + resultWidths: (number | string | undefined)[], + visibleColumns: Column[], + hiddenQueue: Column[], + ): void { this._hiddenColumns = []; - if (that._isVisibleColumnsValid(visibleColumns) && hiddenQueue.length) { + if (this._isVisibleColumnsValid(visibleColumns) && hiddenQueue.length) { let totalWidth = 0; - const $rootElement = that.component.$element(); - let rootElementWidth = getWidth($rootElement) - that._getCommandColumnsWidth(); + const $rootElement = this.component.$element(); + const availableWidth = getWidth($rootElement) - this._rowsView.getScrollbarWidth(); + let rootElementWidth = availableWidth - this._getCommandColumnsWidth(); const getVisibleContentColumns = function () { return visibleColumns.filter((item) => !item.command && this._hiddenColumns.filter((i) => i.index === item.index).length === 0); }.bind(this); let visibleContentColumns = getVisibleContentColumns(); const contentColumnsCount = visibleContentColumns.length; - let i; - let hasHiddenColumns; - let needHideColumn; + let hasHiddenColumns = false; + let needHideColumn = false; do { needHideColumn = false; totalWidth = 0; - const percentWidths = that._calculatePercentWidths(resultWidths, visibleColumns); + const percentWidths = this._calculatePercentWidths(resultWidths, visibleColumns); const columnsCanFit = percentWidths < 100 && percentWidths !== 0; - for (i = 0; i < visibleColumns.length; i++) { + for (let i = 0; i < visibleColumns.length; i += 1) { const visibleColumn = visibleColumns[i]; - let columnWidth = that._getNotTruncatedColumnWidth(visibleColumn, rootElementWidth, visibleContentColumns, columnsCanFit); - const columnId = getColumnId(that, visibleColumn); - const widthOption = that._columnsController.columnOption(columnId, 'width'); - const minWidth = that._columnsController.columnOption(columnId, 'minWidth'); - const columnBestFitWidth = that._columnsController.columnOption(columnId, 'bestFitWidth'); + let columnWidth = this._getNotTruncatedColumnWidth(visibleColumn, rootElementWidth, visibleContentColumns, columnsCanFit); + const columnId = getColumnId(this, visibleColumn); + const widthOption = this._columnsController.columnOption(columnId, 'width'); + const minWidth = this._columnsController.columnOption(columnId, 'minWidth'); + const columnBestFitWidth = this._columnsController.columnOption(columnId, 'bestFitWidth'); if (resultWidths[i] === HIDDEN_COLUMNS_WIDTH) { hasHiddenColumns = true; @@ -668,15 +670,15 @@ export class AdaptiveColumnsController extends modules.ViewController { } } - needHideColumn = needHideColumn || totalWidth > getWidth($rootElement); + needHideColumn = needHideColumn || totalWidth > availableWidth; if (needHideColumn) { - const column = hiddenQueue.pop(); - const visibleIndex = that._columnsController.getVisibleIndex(column.index); + const column = hiddenQueue.pop() as Column; + const visibleIndex = this._columnsController.getVisibleIndex(column.index); - rootElementWidth += that._calculateColumnWidth(column, rootElementWidth, visibleContentColumns, columnsCanFit); + rootElementWidth += this._calculateColumnWidth(column, rootElementWidth, visibleContentColumns, columnsCanFit); - that._hideVisibleColumn({ visibleIndex }); + this._hideVisibleColumn({ visibleIndex }); resultWidths[visibleIndex] = HIDDEN_COLUMNS_WIDTH; this._hiddenColumns.push(column); visibleContentColumns = getVisibleContentColumns(); @@ -685,10 +687,10 @@ export class AdaptiveColumnsController extends modules.ViewController { while (needHideColumn && visibleContentColumns.length > 1 && hiddenQueue.length); if (contentColumnsCount === visibleContentColumns.length) { - that._hideAdaptiveColumn(resultWidths, visibleColumns); + this._hideAdaptiveColumn(resultWidths, visibleColumns); } } else { - that._hideAdaptiveColumn(resultWidths, visibleColumns); + this._hideAdaptiveColumn(resultWidths, visibleColumns); } } @@ -806,8 +808,8 @@ export class AdaptiveColumnsController extends modules.ViewController { return this._hiddenColumns.length > 0; } - public getHidingColumnsQueue() { - return this._hidingColumnsQueue; + public getHidingColumnsQueue(): Column[] { + return this._hidingColumnsQueue ?? []; } public isAdaptiveDetailRowExpanded(key) {