From d85d2f3e52e9a60da9ffdbe71535f012e72f1ba0 Mon Sep 17 00:00:00 2001
From: Denis Voituron <dvoituron@outlook.com>
Date: Tue, 1 Apr 2025 10:56:17 +0200
Subject: [PATCH 1/2] Add TreewView MultiSelect example

---
 .../Examples/TreeViewMultiSelect.razor        | 69 +++++++++++++++++++
 .../Shared/Pages/TreeView/TreeViewPage.razor  |  2 +
 2 files changed, 71 insertions(+)
 create mode 100644 examples/Demo/Shared/Pages/TreeView/Examples/TreeViewMultiSelect.razor

diff --git a/examples/Demo/Shared/Pages/TreeView/Examples/TreeViewMultiSelect.razor b/examples/Demo/Shared/Pages/TreeView/Examples/TreeViewMultiSelect.razor
new file mode 100644
index 0000000000..8750ea1fb4
--- /dev/null
+++ b/examples/Demo/Shared/Pages/TreeView/Examples/TreeViewMultiSelect.razor
@@ -0,0 +1,69 @@
+<FluentTreeView Items="@Items" LazyLoadItems="true" Class="no-selected-indicator">
+    <ItemTemplate>
+        <FluentCheckbox Value="@(SelectedItems.Contains(context))"
+                        ValueChanged="@(e => CheckboxHandler(e, context))"
+                        Style="margin-right: 12px;">
+            @context.Text
+        </FluentCheckbox>
+    </ItemTemplate>
+</FluentTreeView>
+
+<div>
+    <b>Selected items:</b> @(string.Join("; ", SelectedItems.Select(i => i.Text)))
+</div>
+
+<style>
+    .no-selected-indicator fluent-tree-item[selected]::part(positioning-region) {
+        background-color: var(--neutral-fill-stealth-rest);
+    }
+
+    .no-selected-indicator fluent-tree-item::part(positioning-region):hover {
+        background-color: var(--neutral-fill-stealth-rest);
+    }
+
+    .no-selected-indicator fluent-tree-item[selected]::after {
+        display: none;
+    }
+</style>
+
+@code
+{
+    private int Count = -1;
+    private IEnumerable<ITreeViewItem> Items = new List<ITreeViewItem>();
+    private List<ITreeViewItem> SelectedItems = new List<ITreeViewItem>();
+
+    protected override void OnInitialized()
+    {
+        Items = CreateTree(maxLevel: 3, nbItemsPerLevel: 5).Items ?? [];
+    }
+
+    // Add or remove item from the selected items list
+    private void CheckboxHandler(bool selected, ITreeViewItem item)
+    {
+        if (selected && !SelectedItems.Contains(item))
+        {
+            SelectedItems.Add(item);
+        }
+        else if (!selected && SelectedItems.Contains(item))
+        {
+            SelectedItems.Remove(item);
+        }
+    }
+
+    // Recursive method to create tree
+    private TreeViewItem CreateTree(int maxLevel, int nbItemsPerLevel, int level = 0)
+    {
+        Count++;
+
+        var treeItem = new TreeViewItem
+            {
+                Text = $"Item {Count}",
+                Items = level == maxLevel
+                              ? null
+                              : new List<TreeViewItem>(Enumerable.Range(1, nbItemsPerLevel)
+                                                                 .Select(i => CreateTree(maxLevel, nbItemsPerLevel, level + 1))),
+            };
+
+        return treeItem;
+    }
+}
diff --git a/examples/Demo/Shared/Pages/TreeView/TreeViewPage.razor b/examples/Demo/Shared/Pages/TreeView/TreeViewPage.razor
index 956ad4adb9..b5f67b325f 100644
--- a/examples/Demo/Shared/Pages/TreeView/TreeViewPage.razor
+++ b/examples/Demo/Shared/Pages/TreeView/TreeViewPage.razor
@@ -35,6 +35,8 @@
 
 <DemoSection Title="Dynamic tree generation via Items" Component="@typeof(TreeViewWithItems)" />
 
+<DemoSection Title="Multi-select" Component="@typeof(TreeViewMultiSelect)" />
+
 <DemoSection Title="With Unlimited Items" Component="@typeof(TreeViewWithUnlimitedItems)" />
 
 <DemoSection Title="Flat tree" Component="@typeof(TreeViewFlat)" />

From 5520c3607634054672615c369e6b7bccd4396c33 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Tue, 1 Apr 2025 11:35:38 +0200
Subject: [PATCH 2/2] Fix test (caused by PR #3593)

---
 ...dSortByTests_SortByColumnIndex_Ascending.verified.razor.html | 2 +-
 ...SortByTests_SortByColumnIndex_Descending.verified.razor.html | 2 +-
 ...dSortByTests_SortByColumnTitle_Ascending.verified.razor.html | 2 +-
 ...SortByTests_SortByColumnTitle_Descending.verified.razor.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
index e60ad0bf58..eccdadcdc5 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -3,7 +3,7 @@
   <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: 5;" 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="">
+        <span class="keycapture" style="width: 100%;" 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">
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
index e2539642dc..1d9aebc785 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -3,7 +3,7 @@
   <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: 5;" 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="">
+        <span class="keycapture" style="width: 100%;" 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">
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
index e60ad0bf58..eccdadcdc5 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
@@ -3,7 +3,7 @@
   <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: 5;" 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="">
+        <span class="keycapture" style="width: 100%;" 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">
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
index e2539642dc..1d9aebc785 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
@@ -3,7 +3,7 @@
   <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: 5;" 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="">
+        <span class="keycapture" style="width: 100%;" 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">