diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index 70f91676bb..719c4cfcb2 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js @@ -219,11 +219,13 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true) } const id = gridElement.id; - grids.push({ - id, - columns, - initialWidths, - }); + if (!grids.find(grid => grid.id === id)) { + grids.push({ + id, + columns, + initialWidths, + }); + } function setListeners(div, isRTL) { let pageX, curCol, curColWidth; @@ -351,7 +353,7 @@ export function resetColumnWidths(gridElement) { } export function resizeColumnDiscrete(gridElement, column, change) { - + const isGrid = gridElement.classList.contains('grid'); const columns = []; let headerBeingResized; @@ -369,7 +371,7 @@ export function resizeColumnDiscrete(gridElement, column, change) { grids.find(({ id }) => id === gridElement.id).columns.forEach(column => { if (column.header === headerBeingResized) { - const width = headerBeingResized.getBoundingClientRect().width + change; + const width = headerBeingResized.offsetWidth + change; //.getBoundingClientRect().width + change; if (change < 0) { column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px'; @@ -377,19 +379,24 @@ export function resizeColumnDiscrete(gridElement, column, change) { else { column.size = width + 'px'; } + column.header.style.width = column.size; } - else { + if (isGrid) { + // for grid we need to recalculate all columns that are minmax if (column.size.startsWith('minmax')) { column.size = parseInt(column.header.clientWidth, 10) + 'px'; } + columns.push(column.size); } - columns.push(column.size); }); - gridElement.style.gridTemplateColumns = columns.join(' '); + if (isGrid) { + gridElement.style.gridTemplateColumns = columns.join(' '); + } } export function resizeColumnExact(gridElement, column, width) { + const isGrid = gridElement.classList.contains('grid'); const columns = []; let headerBeingResized = gridElement.querySelector('.column-header[col-index="' + column + '"]'); @@ -400,16 +407,21 @@ export function resizeColumnExact(gridElement, column, width) { grids.find(({ id }) => id === gridElement.id).columns.forEach(column => { if (column.header === headerBeingResized) { column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px'; + column.header.style.width = column.size; } - else { + if (isGrid) { + // for grid we need to recalculate all columns that are minmax if (column.size.startsWith('minmax')) { column.size = parseInt(column.header.clientWidth, 10) + 'px'; } + column.header.style.width = column.size; + columns.push(column.size); } - columns.push(column.size); }); - gridElement.style.gridTemplateColumns = columns.join(' '); + if (isGrid) { + gridElement.style.gridTemplateColumns = columns.join(' '); + } gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true })); gridElement.focus(); diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index 64997d1b83..b5b17d5410 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -71,7 +71,7 @@ public partial class FluentDataGridCell : FluentComponentBase .AddStyle("grid-column", GridColumn.ToString(), () => !Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null) && Grid.DisplayMode == DataGridDisplayMode.Grid) .AddStyle("text-align", "center", Column is SelectColumn) .AddStyle("align-content", "center", Column is SelectColumn) - .AddStyle("min-width", Column?.MinWidth, Owner.RowType == DataGridRowType.Header) + .AddStyle("min-width", Column?.MinWidth, Owner.RowType is DataGridRowType.Header or DataGridRowType.StickyHeader) .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn && Owner.RowType == DataGridRowType.Default) .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header)) .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)