Skip to content

Commit

Permalink
[DataGrid] Fix issues related to Sortable not being set on a column (#…
Browse files Browse the repository at this point in the history
…3310)

* - Do not add global.json to repo
- Fix #3306 by accounting for Sortable being null
- Fix #3309 by adding a StateHasChanged

* - Cleanup issueTester
- Tune column/style behavior
- Fix tests
  • Loading branch information
vnbaaij authored Feb 7, 2025
1 parent 894a143 commit fde55a9
Show file tree
Hide file tree
Showing 16 changed files with 75 additions and 116 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -412,3 +412,4 @@ Microsoft.Fast.Components.FluentUI.xml
/tests/TemplateValidation/**/Data/Migrations
/tests/TemplateValidation/**/Data/*
/spelling.dic
/global.json
77 changes: 1 addition & 76 deletions examples/Demo/Shared/Pages/Lab/IssueTester.razor
Original file line number Diff line number Diff line change
@@ -1,76 +1 @@
@page "/FluentComboBox"

@using System.Linq.Expressions

<Form Model="modelTest" EnableFluentValidation=true>
<FluentCombobox
SelectedOptionChanged="@((selectedOption) => OnSelectedOptionChangedAsync(selectedOption))"
ValueChanged="@((value) => OnValueChangedAsync(value))"
ValueExpression="@(() => modelTest.SelectedValue)"
TOption="OptionItem"
Items="@Items"
OptionValue="@(i => i.Value)"
OptionText="@(i => i.Name)"
OptionDisabled="@(i => i.Disabled)"
OptionSelected="@(i => i.Value == modelTest.SelectedValue)"
Autocomplete=ComboboxAutocomplete.Both
Placeholder="Testing binding" />

<p>@modelTest.SelectedValue</p>
<p>@typedText</p>
</Form>

@code {
private string? typedText;
private OptionItem[] Items { get; set; } = [
new OptionItem { Name = "Test 1", Value = "TEST1", Disabled = false },
new OptionItem { Name = "Test 2", Value = "TEST2", Disabled = false },
new OptionItem { Name = "Test 3", Value = "TEST3", Disabled = false }
];

public class ModelTest
{
public string? SelectedValue { get; set; }
}

private ModelTest modelTest = new();

private async Task OnSelectedOptionChangedAsync(OptionItem? selectedOption)
{
if (selectedOption is not null)
{
Console.WriteLine($"OnSelectedOptionChangedAsync enter modelTest.SelectedValue:{modelTest.SelectedValue}, selectedOption.Value:{selectedOption.Value}.");
if (modelTest.SelectedValue != selectedOption.Value)
{
Console.WriteLine($"OnSelectedOptionChangedAsync before modelTest.SelectedValue:{modelTest.SelectedValue}, selectedOption.Value:{selectedOption.Value}.");
modelTest.SelectedValue = selectedOption.Value;
Console.WriteLine($"OnSelectedOptionChangedAsync after modelTest.SelectedValue:{modelTest.SelectedValue}, selectedOption.Value:{selectedOption.Value}.");
}
}

await Task.CompletedTask;
}

private async Task OnValueChangedAsync(string? text)
{
Console.WriteLine($"OnValueChangedAsync enter modelTest.SelectedValue:{modelTest.SelectedValue}, text:{text}.");
typedText = text;
if (modelTest.SelectedValue != default
&& (string.IsNullOrEmpty(text) || !Items.Select(i => i.Name).Contains(text)))
{
Console.WriteLine($"OnValueChangedAsync before value:{modelTest.SelectedValue}");
modelTest.SelectedValue = default;
Console.WriteLine($"OnValueChangedAsync after value:{modelTest.SelectedValue}");
}

await Task.CompletedTask;
}

public class OptionItem
{
public string? Name { get; set; }
public string? Value { get; set; }
public bool Hidden { get; set; }
public bool Disabled { get; set; }
}
}

7 changes: 6 additions & 1 deletion src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
// ------------------------------------------------------------------------
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
// ------------------------------------------------------------------------

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using Microsoft.AspNetCore.Components.Web;
Expand Down Expand Up @@ -250,6 +254,7 @@ private async Task HandleColumnHeaderClickedAsync()
if ((Sortable is true || IsDefaultSortColumn) && (Grid.ResizableColumns || ColumnOptions is not null))
{
_isMenuOpen = !_isMenuOpen;
StateHasChanged();
}
else if ((Sortable is true || IsDefaultSortColumn) && !Grid.ResizableColumns && ColumnOptions is null)
{
Expand Down Expand Up @@ -296,7 +301,7 @@ private string GetSortOptionText()
if (Grid.SortByAscending is true)
{
return Grid.ColumnSortLabels.SortMenuAscendingLabel;
}
}
else
{
return Grid.ColumnSortLabels.SortMenuDescendingLabel;
Expand Down
13 changes: 10 additions & 3 deletions src/Core/Components/DataGrid/Columns/PropertyColumn.cs
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
// ------------------------------------------------------------------------
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
// ------------------------------------------------------------------------

using System.Linq.Expressions;
using System.Reflection;
using Microsoft.AspNetCore.Components;
Expand Down Expand Up @@ -42,7 +46,8 @@ public class PropertyColumn<TGridItem, TProp> : ColumnBase<TGridItem>, IBindable
/// </summary>
[Parameter] public IComparer<TProp>? Comparer { get; set; } = null;

[Parameter] public override GridSort<TGridItem>? SortBy
[Parameter]
public override GridSort<TGridItem>? SortBy
{
get => _customSortBy ?? _sortBuilder;
set => _customSortBy = value;
Expand Down Expand Up @@ -88,8 +93,10 @@ protected override void OnParametersSet()
}
};
}

_sortBuilder = Comparer is not null ? GridSort<TGridItem>.ByAscending(Property, Comparer) : GridSort<TGridItem>.ByAscending(Property);
if (Sortable.HasValue)
{
_sortBuilder = Comparer is not null ? GridSort<TGridItem>.ByAscending(Property, Comparer) : GridSort<TGridItem>.ByAscending(Property);
}
}

_cellTooltipTextFunc = TooltipText ?? _cellTextFunc;
Expand Down
6 changes: 4 additions & 2 deletions src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,10 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
.AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
.AddStyle("height", "100%", Grid.MultiLine)
.AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
.AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column!.Sortable.HasValue && !Column!.Sortable.Value)) && Grid._columns.Count > 0)
.AddStyle("z-index", (Grid._columns.Count - Column?.Index).ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0)
.AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column.Sortable.HasValue && !Column.Sortable.Value)) && Grid._columns.Count > 0)
.AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && Column is not null && Column.GetType() != typeof(SelectColumn<TGridItem>) && Column.SortBy is null && Grid._columns.Count > 0)

.AddStyle("z-index", (Grid._columns.Count + 1 - Column?.Index).ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0)
.AddStyle(Owner.Style)
.Build();

Expand Down
1 change: 0 additions & 1 deletion src/Core/Components/List/ListComponentBase.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,6 @@ public override async Task SetParametersAsync(ParameterView parameters)
}
}


if (SelectedOptionExpression is not null)
{
FieldIdentifier = FieldIdentifier.Create(SelectedOptionExpression);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
</div>
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<span class="keycapture" blazor:oncontextmenu="57" blazor:elementreference="">
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
</div>
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<span class="keycapture" blazor:oncontextmenu="57" blazor:elementreference="">
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
</div>
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<span class="keycapture" blazor:oncontextmenu="57" blazor:elementreference="">
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
</div>
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<span class="keycapture" blazor:oncontextmenu="57" blazor:elementreference="">
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions tests/Core/DataGrid/DataGridSortByTests.razor
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

var cut = Render(
@<FluentDataGrid TGridItem="(string, string)" Items="@_items" @ref="_dataGrid">
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" />
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" Sortable="true" />
<PropertyColumn Title="Item2" Property="@(x => x.Item2)" />
</FluentDataGrid>);

Expand All @@ -43,7 +43,7 @@

var cut = Render(
@<FluentDataGrid TGridItem="(string, string)" Items="@_items" @ref="_dataGrid">
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" />
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" Sortable="true" />
<PropertyColumn Title="Item2" Property="@(x => x.Item2)" />
</FluentDataGrid>);

Expand All @@ -60,7 +60,7 @@

var cut = Render(
@<FluentDataGrid TGridItem="(string, string)" Items="@_items" @ref="_dataGrid">
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" />
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" Sortable="true" />
<PropertyColumn Title="Item2" Property="@(x => x.Item2)" />
</FluentDataGrid>);

Expand All @@ -77,7 +77,7 @@

var cut = Render(
@<FluentDataGrid TGridItem="(string, string)" Items="@_items" @ref="_dataGrid">
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" />
<PropertyColumn Title="Item1" Property="@(x => x.Item1)" Sortable="true" />
<PropertyColumn Title="Item2" Property="@(x => x.Item2)" />
</FluentDataGrid>);

Expand Down
Loading

0 comments on commit fde55a9

Please sign in to comment.