Skip to content

Commit 115dfaa

Browse files
vnbaaijvnbaaij
authored
[de-v5][DataGrid] Tweak script and styling (#4504)
* - Script and CSS refinements for FluentDataGrid * Fix Demo layout showing both text dir icons initially
1 parent dc9cb91 commit 115dfaa

File tree

6 files changed

+111
-95
lines changed

6 files changed

+111
-95
lines changed

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridTypical.razor.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
.flag {
33
height: 1rem;
44
border: 1px solid var(--colorNeutralBackground3);
5+
margin-top: 3px;
56
}
67
.search-box {
78
min-width: 250px;

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridVirtualize.razor‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,87 @@
11
<div style="height: 400px; max-width: 800px; overflow-y: scroll;">
2-
<FluentDataGrid @ref="grid"
3-
Items=@items
4-
Virtualize="true"
5-
DisplayMode="DataGridDisplayMode.Table"
6-
Style="width: 100%;"
7-
ItemSize="54"
8-
GenerateHeader="@DataGridGeneratedHeaderType.Sticky">
9-
<ChildContent>
10-
<PropertyColumn Width="25%" Property="@(c => c.Item1)" Sortable="true" />
11-
<PropertyColumn Width="25%" Property="@(c => c.Item2)" />
12-
<PropertyColumn Width="25%" Property="@(c => c.Item3)" Align="DataGridCellAlignment.Center" />
13-
<PropertyColumn Width="25%" Property="@(c => c.Item4)" Align="DataGridCellAlignment.End" />
14-
</ChildContent>
15-
<EmptyContent>
16-
<FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Primary" />&nbsp; Nothing to see here. Carry on!
17-
</EmptyContent>
18-
<LoadingContent>
19-
<FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
20-
Loading...<br />
21-
<FluentProgressBar Width="240px" />
22-
</FluentStack>
23-
</LoadingContent>
24-
</FluentDataGrid>
2+
<FluentDataGrid @ref="grid"
3+
Items=@items
4+
Virtualize="true"
5+
DisplayMode="DataGridDisplayMode.Table"
6+
Style="width: 100%;"
7+
ItemSize="54"
8+
GenerateHeader="@DataGridGeneratedHeaderType.Sticky">
9+
<ChildContent>
10+
<PropertyColumn Width="25%" Property="@(c => c.Item1)" Sortable="true" />
11+
<PropertyColumn Width="25%" Property="@(c => c.Item2)" />
12+
<PropertyColumn Width="25%" Property="@(c => c.Item3)" Align="DataGridCellAlignment.Center" />
13+
<PropertyColumn Width="25%" Property="@(c => c.Item4)" Align="DataGridCellAlignment.End" />
14+
</ChildContent>
15+
<EmptyContent>
16+
<FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Primary" />&nbsp; Nothing to see here. Carry on!
17+
</EmptyContent>
18+
<LoadingContent>
19+
<FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
20+
Loading...<br />
21+
<FluentProgressBar Width="240px" />
22+
</FluentStack>
23+
</LoadingContent>
24+
</FluentDataGrid>
2525
</div>
2626
<br />
27-
<FluentSwitch @ref="_clearToggle"
28-
@bind-Value="@_clearItems"
29-
@bind-Value:after="ToggleItems"
30-
Label="@switchLabel">
31-
</FluentSwitch>
32-
<FluentButton OnClick="SimulateDataLoading">Simulate data loading</FluentButton>
27+
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="10px" VerticalAlignment="VerticalAlignment.Center">
28+
<FluentSwitch @ref="_clearToggle"
29+
@bind-Value="@_clearItems"
30+
@bind-Value:after="ToggleItems"
31+
Label="@switchLabel">
32+
</FluentSwitch>
33+
<FluentButton OnClick="SimulateDataLoading">Simulate data loading</FluentButton>
34+
</FluentStack>
3335

3436
@code {
35-
FluentDataGrid<SampleGridData>? grid;
36-
FluentSwitch? _clearToggle;
37-
string switchLabel = "Clear data";
37+
FluentDataGrid<SampleGridData>? grid;
38+
FluentSwitch? _clearToggle;
39+
string switchLabel = "Clear data";
3840

39-
bool _clearItems = false;
40-
public record SampleGridData(string Item1, string Item2, string Item3, string Item4);
41+
bool _clearItems = false;
42+
public record SampleGridData(string Item1, string Item2, string Item3, string Item4);
4143

42-
IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable();
44+
IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable();
4345

44-
private IQueryable<SampleGridData> GenerateSampleGridData(int size)
45-
{
46-
SampleGridData[] data = new SampleGridData[size];
46+
private IQueryable<SampleGridData> GenerateSampleGridData(int size)
47+
{
48+
SampleGridData[] data = new SampleGridData[size];
4749

48-
for (int i = 0; i < size; i++)
49-
{
50-
data[i] = new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4");
51-
}
52-
return data.AsQueryable();
53-
}
54-
protected override void OnInitialized()
55-
{
56-
items = GenerateSampleGridData(5000);
57-
}
50+
for (int i = 0; i < size; i++)
51+
{
52+
data[i] = new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4");
53+
}
54+
return data.AsQueryable();
55+
}
56+
protected override void OnInitialized()
57+
{
58+
items = GenerateSampleGridData(5000);
59+
}
5860

59-
private void ToggleItems()
60-
{
61-
if (_clearItems)
62-
{
63-
items = null;
64-
switchLabel = "Restore data";
65-
}
66-
else
67-
{
68-
items = GenerateSampleGridData(5000);
69-
switchLabel = "Clear data";
70-
}
71-
}
61+
private void ToggleItems()
62+
{
63+
if (_clearItems)
64+
{
65+
items = null;
66+
switchLabel = "Restore data";
67+
}
68+
else
69+
{
70+
items = GenerateSampleGridData(5000);
71+
switchLabel = "Clear data";
72+
}
73+
}
7274

73-
private async Task SimulateDataLoading()
74-
{
75-
_clearItems = false;
75+
private async Task SimulateDataLoading()
76+
{
77+
_clearItems = false;
7678

77-
items = null;
78-
grid?.SetLoadingState(true);
79+
items = null;
80+
grid?.SetLoadingState(true);
7981

80-
await Task.Delay(1500);
82+
await Task.Delay(1500);
8183

82-
items = GenerateSampleGridData(5000);
83-
grid?.SetLoadingState(false);
84-
}
84+
items = GenerateSampleGridData(5000);
85+
grid?.SetLoadingState(false);
86+
}
8587
}

‎examples/Demo/FluentUI.Demo.Client/wwwroot/app.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
border: 1px dashed var(--colorBrandForeground1);
55
padding: 5px;
66
}
7-
[dir=rtl] .hidden-if-ltr {
7+
8+
:dir(rtl) .hidden-if-ltr {
89
display: none;
910
}
1011

11-
[dir=ltr] .hidden-if-rtl {
12+
:dir(ltr) .hidden-if-rtl {
1213
display: none;
1314
}
1415

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@
7070
right: 0;
7171
left: unset;
7272
bottom: 0;
73-
height: 30px;
73+
height: 80%;
7474
cursor: col-resize;
75-
width: 4px;
75+
width: 6px;
7676
border-inline-end: var(--fluent-data-grid-resize-handle-width) solid var(--fluent-data-grid-resize-handle-color);
7777
opacity: var(--fluent-data-grid-header-opacity);
7878
}

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

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,15 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
6868
if (columnOptionsElement && columnOptionsElement.contains(event.target as HTMLElement)) {
6969
if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
7070
event.stopPropagation();
71+
return;
7172
}
7273
}
7374

7475
const columnResizeElement = gridElement?.querySelector('.col-resize');
7576
if (columnResizeElement && columnResizeElement.contains(event.target as HTMLElement)) {
7677
if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
7778
event.stopPropagation();
79+
return;
7880
}
7981
}
8082

@@ -264,8 +266,11 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
264266
resizeController: signal ? undefined : localController,
265267
});
266268
} else {
269+
const columnsChanged = grid.columns.length !== columns.length;
267270
grid.columns = columns;
268-
grid.initialWidths = initialWidths;
271+
if (columnsChanged) {
272+
grid.initialWidths = initialWidths;
273+
}
269274
grid.resizeController = signal ? undefined : localController;
270275
}
271276

@@ -306,6 +311,8 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
306311
const upHandler = function () {
307312
gridElement.removeEventListener('pointermove', moveHandler);
308313
gridElement.removeEventListener('pointerup', upHandler);
314+
gridElement.removeEventListener('pointerleave', upHandler);
315+
gridElement.removeEventListener('pointercancel', upHandler);
309316

310317
curCol = undefined;
311318
curColWidth = undefined;
@@ -323,6 +330,8 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
323330

324331
gridElement.addEventListener('pointermove', moveHandler, { signal });
325332
gridElement.addEventListener('pointerup', upHandler, { signal });
333+
gridElement.addEventListener('pointerleave', upHandler, { signal });
334+
gridElement.addEventListener('pointercancel', upHandler, { signal });
326335
}, { signal });
327336

328337
div.addEventListener('pointerover', function (e: MouseEvent) {
@@ -344,7 +353,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
344353
div.style.position = 'absolute';
345354
div.style.cursor = 'col-resize';
346355
div.style.userSelect = 'none';
347-
div.style.height = (height - 5) + 'px'; // adjust for the top offset
356+
div.style.height = (height - 4) + 'px'; // adjust for the top offset
348357
div.style.width = '6px';
349358
div.style.opacity = 'var(--fluent-data-grid-header-opacity)';
350359
div.style.insetInlineEnd = '0';
@@ -380,19 +389,24 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
380389
return;
381390
}
382391

383-
const columnsWidths = grid.initialWidths.split(' ');
384-
385-
grid.columns.forEach((column: any, index: number) => {
386-
if (isGrid) {
387-
column.size = columnsWidths[index];
388-
} else {
389-
column.header.style.width = columnsWidths[index];
390-
}
391-
});
392-
393392
if (isGrid) {
394393
gridElement.style.gridTemplateColumns = grid.initialWidths;
394+
395+
// Force browser to recalculate so we can get accurate computed widths
396+
const resolvedWidths = window.getComputedStyle(gridElement).gridTemplateColumns.split(' ');
397+
398+
grid.columns.forEach((column, index) => {
399+
column.size = resolvedWidths[index];
400+
(column.header as HTMLElement).style.width = "";
401+
});
402+
} else {
403+
const columnsWidths = grid.initialWidths.split(' ');
404+
grid.columns.forEach((column: any, index: number) => {
405+
column.size = columnsWidths[index];
406+
column.header.style.width = column.size;
407+
});
395408
}
409+
396410
gridElement.dispatchEvent(
397411
new CustomEvent('closecolumnresize', { bubbles: true })
398412
);
@@ -426,9 +440,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
426440
else {
427441
column.size = width + 'px';
428442
}
429-
if (!isGrid) {
430-
column.header.style.width = column.size;
431-
}
443+
column.header.style.width = column.size;
432444
}
433445

434446
if (isGrid) {
@@ -457,9 +469,7 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
457469
grids.find(grid => grid.id === gridElement.id)!.columns.forEach((column: any) => {
458470
if (column.header === headerBeingResized) {
459471
column.size = Math.max(parseInt(column.header.style.minWidth === '' ? '100' : column.header.style.minWidth, 10), width) + 'px';
460-
if (!isGrid) {
461-
column.header.style.width = column.size;
462-
}
472+
column.header.style.width = column.size;
463473
}
464474

465475
if (isGrid) {

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
}
55

66
.fluent-data-grid td:not(.col-select) {
7-
padding: 6px 18px;
7+
padding: 0 18px;
88
overflow: hidden;
99
text-overflow: ellipsis;
1010
white-space: nowrap;
1111
align-content: center;
1212
}
13-
13+
.fluent-data-grid td:focus-visible {
14+
outline-offset: -1px;
15+
}
1416

1517
.fluent-data-grid td.col-justify-center {
1618
text-align: center;
@@ -51,7 +53,7 @@
5153
font-weight: 600;
5254
text-align: center;
5355
position: relative;
54-
padding: 0px 1px;
56+
padding: 2px 2px;
5557
}
5658

5759
.fluent-data-grid .col-sort-button {

0 commit comments

Comments
 (0)