Skip to content

[DataGrid] - Header needs display: flex in certain scenarios, multiline-text class must not be added to header #3118

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

Merged
vnbaaij merged 3 commits into from
Jan 2, 2025
Merged

[DataGrid] - Header needs display: flex in certain scenarios, multiline-text class must not be added to header #3118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bebf913
Fix #3110: Multiline-text class must not be added to header,
vnbaaij Jan 2, 2025
a72149f
Fix tests
vnbaaij Jan 2, 2025
49a4a75
Merge branch 'dev' into users/vnbaaij/fix-issue-#3110
vnbaaij Jan 2, 2025
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
3 changes: 2 additions & 1 deletion src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
protected string? ClassValue => new CssBuilder(Class)
.AddClass("column-header", when: CellType == DataGridCellType.ColumnHeader)
.AddClass("select-all", when: CellType == DataGridCellType.ColumnHeader && Column is SelectColumn<TGridItem>)
.AddClass("multiline-text", when: Grid.MultiLine)
.AddClass("multiline-text", when: Grid.MultiLine && CellType != DataGridCellType.ColumnHeader)
.AddClass(Owner.Class)
.Build();

Expand All @@ -78,6 +78,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
.AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
.AddStyle("height", "100%", InternalGridContext.TotalItemCount == 0 || (Grid.EffectiveLoadingValue && Grid.Items is null) || Grid.MultiLine)
.AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
.AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns)
.AddStyle(Owner.Style)
.Build();

Expand Down
4 changes: 2 additions & 2 deletions ...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<table id="xxx" class="fluent-data-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" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" 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>
<th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" 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
4 changes: 2 additions & 2 deletions .../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<table id="xxx" class="fluent-data-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" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" 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>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" 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
4 changes: 2 additions & 2 deletions ...d/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<table id="xxx" class="fluent-data-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" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" 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>
<th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-asc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" 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
4 changes: 2 additions & 2 deletions .../DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<table id="xxx" class="fluent-data-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" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" 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>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" 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
4 changes: 2 additions & 2 deletions ...lectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" 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" b-upi3f9mbnn="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy="">
<div style="cursor: pointer; margin-left: 12px;" blazor:onclick="20" blazor:onkeydown="21">➖</div>
</th>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="22" blazor:onclick="23" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="22" blazor:onclick="23" 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="">Name</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...GridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" 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" b-upi3f9mbnn="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy="">
<svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="34" blazor:onkeydown="35">
<title>Some rows are selected.</title>
<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>
<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>
</svg>
</th>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="20" blazor:onclick="21" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="20" blazor:onclick="21" 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="">Name</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...ridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" 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" b-upi3f9mbnn="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="20" blazor:onclick="21" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="1" class="column-header select-all col-justify-center col-sort-desc" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
<th col-index="2" class="column-header col-justify-start col-sort-desc" style="grid-column: 2; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="20" blazor:onclick="21" 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="">Name</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr;" aria-rowcount="4" 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" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" 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="">Name</div>
</div>
Expand Down
Loading