Skip to content

DataGrid: fix width calculation when column hiding enabled (T1326188) #33242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anna-shakhova wants to merge 1 commit into
base: 25_2
Choose a base branch
from
+49 −26
Open

DataGrid: fix width calculation when column hiding enabled (T1326188) #33242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}));
54 changes: 28 additions & 26 deletions packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export class AdaptiveColumnsController extends modules.ViewController {

private _form?: Form;

private _hidingColumnsQueue: any;
private _hidingColumnsQueue?: Column[];

protected _keyboardNavigationController!: KeyboardNavigationController;

Expand Down Expand Up @@ -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;
Expand All @@ -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();
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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) {
Expand Down
Loading