Skip to content

Commit f928a1c

Browse files
vnbaaijvnbaaij
committed
Implement #4116 
1 parent 734bd5e commit f928a1c

11 files changed

+52
-36
lines changed

‎src/Core/Components/DataGrid/FluentDataGrid.razor.ts‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
22

33
interface Grid {
44
id: string;
5-
columns: any[]; // or a more specific type if you have one
5+
columns: Column[]; // or a more specific type if you have one
66
initialWidths: string;
77
}
88

@@ -12,8 +12,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
1212
}
1313

1414
// Use a dictionary for grids for id-based access
15-
let grids: { [id: string]: Grid } = {};
16-
const minWidth = 100;
15+
let grids: Grid[] = []; // { [id: string]: Grid } = {};
1716

1817
export function Initialize(gridElement: HTMLElement, autoFocus: boolean) {
1918
if (gridElement === undefined || gridElement === null) {
@@ -150,7 +149,8 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
150149
document.body.removeEventListener('click', bodyClickHandler);
151150
document.body.removeEventListener('mousedown', bodyClickHandler);
152151
gridElement.removeEventListener('keydown', keyDownHandler);
153-
delete grids[gridElement.id];
152+
grids = grids.filter(grid => grid.id !== gridElement.id);
153+
154154
}
155155
};
156156
}
@@ -236,11 +236,13 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
236236
}
237237

238238
const id = gridElement.id;
239-
grids[id] = {
240-
id,
241-
columns,
242-
initialWidths,
243-
};
239+
if (!grids.find((grid: Grid) => grid.id === id)) {
240+
grids.push({
241+
id,
242+
columns,
243+
initialWidths,
244+
});
245+
}
244246

245247
function setListeners(div: HTMLElement, isRTL: boolean) {
246248
let pageX: number | undefined, curCol: HTMLElement | undefined, curColWidth: number | undefined;
@@ -345,7 +347,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
345347

346348
export function ResetColumnWidths(gridElement: HTMLElement) {
347349
const isGrid = gridElement.classList.contains('grid');
348-
const grid = grids[gridElement.id];
350+
const grid = grids.find(grid => grid.id = gridElement.id);
349351
if (!grid) {
350352
return;
351353
}
@@ -370,6 +372,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
370372
}
371373

372374
export function ResizeColumnDiscrete(gridElement: HTMLElement, column: string | undefined, change: number) {
375+
const isGrid = gridElement.classList.contains('grid');
373376
const columns: any[] = [];
374377
let headerBeingResized: HTMLElement | null | undefined;
375378

@@ -383,50 +386,62 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
383386
else {
384387
headerBeingResized = gridElement.querySelector('.column-header[col-index="' + column + '"]') as HTMLElement | null;
385388
}
386-
387-
grids[gridElement.id].columns.forEach((column: any) => {
389+
grids.find(grid => grid.id = gridElement.id)!.columns.forEach((column: any) => {
388390
if (column.header === headerBeingResized) {
389-
const width = headerBeingResized!.getBoundingClientRect().width + change;
391+
const width = headerBeingResized!.offsetWidth + change;
392+
//const width = headerBeingResized!.getBoundingClientRect().width + change;
390393

391394
if (change < 0) {
392395
column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
393396
}
394397
else {
395398
column.size = width + 'px';
396399
}
400+
column.header.style.width = column.size;
397401
}
398-
else {
402+
403+
if (isGrid) {
404+
// for grid we need to recalculate all columns that are minmax
399405
if (column.size.startsWith('minmax')) {
400406
column.size = parseInt(column.header.clientWidth, 10) + 'px';
401407
}
408+
columns.push(column.size);
402409
}
403-
columns.push(column.size);
404410
});
405411

406-
gridElement.style.gridTemplateColumns = columns.join(' ');
412+
if (isGrid) {
413+
gridElement.style.gridTemplateColumns = columns.join(' ');
414+
}
407415
}
408416

409417
export function ResizeColumnExact(gridElement: HTMLElement, column: string, width: number) {
418+
const isGrid = gridElement.classList.contains('grid');
410419
const columns: any[] = [];
411420
let headerBeingResized = gridElement.querySelector('.column-header[col-index="' + column + '"]') as HTMLElement | null;
412421

413422
if (!headerBeingResized) {
414423
return;
415424
}
416425

417-
grids[gridElement.id].columns.forEach((column: any) => {
426+
grids.find(grid => grid.id = gridElement.id)!.columns.forEach((column: any) => {
418427
if (column.header === headerBeingResized) {
419428
column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
429+
column.header.style.width = column.size;
420430
}
421-
else {
431+
432+
if (isGrid) {
433+
// for grid we need to recalculate all columns that are minmax
422434
if (column.size.startsWith('minmax')) {
423435
column.size = parseInt(column.header.clientWidth, 10) + 'px';
424436
}
437+
column.header.style.width = column.size;
438+
columns.push(column.size);
425439
}
426-
columns.push(column.size);
427440
});
428441

429-
gridElement.style.gridTemplateColumns = columns.join(' ');
442+
if (isGrid) {
443+
gridElement.style.gridTemplateColumns = columns.join(' ');
444+
}
430445

431446
gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
432447
gridElement.focus();
@@ -448,8 +463,9 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
448463
gridElement.style.gridTemplateColumns = gridTemplateColumns;
449464
gridElement.classList.remove('auto-fit');
450465

451-
if (grids[gridElement.id]) {
452-
grids[gridElement.id].initialWidths = gridTemplateColumns;
466+
const grid = grids.find(grid => grid.id = gridElement.id);
467+
if (grid) {
468+
grid.initialWidths = gridTemplateColumns;
453469
}
454470
}
455471

‎src/Core/Components/DataGrid/FluentDataGridCell.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati
3939
.AddStyle("grid-column", GridColumn.ToString(CultureInfo.InvariantCulture), () => !Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null) && Grid.DisplayMode == DataGridDisplayMode.Grid)
4040
.AddStyle("text-align", "center", Column is SelectColumn<TGridItem>)
4141
.AddStyle("align-content", "center", Column is SelectColumn<TGridItem>)
42-
.AddStyle("min-width", Column?.MinWidth, Owner.RowType == DataGridRowType.Header)
42+
.AddStyle("min-width", Column?.MinWidth, Owner.RowType is DataGridRowType.Header or DataGridRowType.StickyHeader)
4343
.AddStyle("padding-top", "10px", Column is SelectColumn<TGridItem> && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
4444
.AddStyle("padding-top", "6px", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)
4545
.AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)

‎tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
5+
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
66
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
77
<div class="col-title" style="width: calc(100% - 10px);">
88
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
5+
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
66
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
77
<div class="col-title" style="width: calc(100% - 10px);">
88
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
5+
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
66
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
77
<div class="col-title" style="width: calc(100% - 10px);">
88
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
5+
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
66
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
77
<div class="col-title" style="width: calc(100% - 10px);">
88
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr; border-collapse: separate; border-spacing: 0;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="sticky-header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
5+
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
66
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
77
<div class="col-title" style="width: calc(100% - 10px);">
88
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
5+
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
66
<div style="cursor: pointer;" blazor:onclick="x" blazor:onkeydown="x">➖</div>
77
</th>
8-
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
8+
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
99
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
1010
<div class="col-title" style="width: calc(100% - 10px);">
1111
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
5+
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
66
<svg style="width: 20px; fill: var(--colorBrandForeground1); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="x" blazor:onkeydown="x" blazor:elementreference="xxx">
77
<title>Some rows are selected</title>
88
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
99
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
1010
</svg>
1111
</th>
12-
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
12+
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
1313
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
1414
<div class="col-title" style="width: calc(100% - 10px);">
1515
<div class="col-title-text">Name</div>

‎tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
33
<thead>
44
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
5-
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
6-
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
5+
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
6+
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
77
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
88
<div class="col-title" style="width: calc(100% - 10px);">
99
<div class="col-title-text">Name</div>

0 commit comments

Comments
 (0)