[TreewView] Add MultiSelect example

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;
+    }
+}

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)" />

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">

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">

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">

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">