Skip to content

FluentTreeView add 2 way binding #511

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 5 commits into from
Jul 10, 2023
Merged

FluentTreeView add 2 way binding #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07a06be
WIP
mrpmorris Jul 9, 2023
bc9629a
Done
mrpmorris Jul 9, 2023
f773a75
Remove test code
mrpmorris Jul 9, 2023
90c1753
Handle expanded changed
mrpmorris Jul 9, 2023
97dae6a
Expanded databinding.
mrpmorris Jul 10, 2023
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
63 changes: 46 additions & 17 deletions examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 47 additions & 0 deletions examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewDataBinding.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<FluentStack Orientation="@Orientation.Horizontal">
<FluentTreeView>
<FluentTreeItem @bind-Expanded=@FlowersExpanded>
Flowers
<FluentTreeItem @bind-Selected=DaisySelected>Daisy</FluentTreeItem>
<FluentTreeItem @bind-Selected=SunflowerSelected>Sunflower</FluentTreeItem>
<FluentTreeItem @bind-Selected=RoseSelected>Rose</FluentTreeItem>
</FluentTreeItem>
<FluentTreeItem @bind-Expanded=@PlanesExpanded>
Planes
<FluentTreeItem>Tomcat</FluentTreeItem>
<FluentTreeItem>Hawker Harrier</FluentTreeItem>
<FluentTreeItem>Cesna</FluentTreeItem>
</FluentTreeItem>
</FluentTreeView>
<FluentStack Orientation="@Orientation.Vertical">
<h2>Expanded</h2>
<FluentCheckbox @bind-Value=FlowersExpanded>
<span aria-label="Flowers expanded">Flowers expanded</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=PlanesExpanded>
<span aria-label="Planes expanded">Planes expanded</span>
</FluentCheckbox>
</FluentStack>
<FluentStack Orientation="@Orientation.Vertical">
<h2>Selected</h2>
<FluentCheckbox @bind-Value=DaisySelected>
<span aria-label="Daisy selected">Daisy selected</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=SunflowerSelected>
<span aria-label="Sunflower selected">Sunflower selected</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=RoseSelected>
<span aria-label="Rose selected">Rose selected</span>
</FluentCheckbox>
</FluentStack>
</FluentStack>

@code
{
bool FlowersExpanded = true;
bool PlanesExpanded = true;

bool DaisySelected = false;
bool SunflowerSelected = true;
bool RoseSelected = false;
}
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</FluentTreeView>

<p>Current selected tree item is @currentSelected?.Text</p>
<p>Current expanded/collapsed tree item is @currentAffected?.Text</p>
<p>Most recently expanded/collapsed tree item is @currentAffected?.Text</p>

@code {
FluentTreeItem? currentSelected;
Expand Down
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewDisabledItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentTreeItem>
Flowers
Expand Down
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewFlat.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<FluentTreeView RenderCollapsedNodes=true>
<FluentTreeItem Selected="true">Daisy</FluentTreeItem>
<FluentTreeItem InitiallySelected="true">Daisy</FluentTreeItem>
<FluentTreeItem>Sunflower</FluentTreeItem>
<FluentTreeItem>Rose</FluentTreeItem>
<FluentDivider></FluentDivider>
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewNested.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="start" />
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Nested Root item 1
<FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="start" />
<FluentTreeItem>
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewSelectedItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentTreeItem>
Flowers
<FluentTreeItem>Daisy</FluentTreeItem>
<FluentTreeItem>Sunflower</FluentTreeItem>
<FluentTreeItem>Rose</FluentTreeItem>
</FluentTreeItem>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Planes
<FluentTreeItem Selected="true">Tomcat</FluentTreeItem>
<FluentTreeItem>Hawker Harrier</FluentTreeItem>
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/Pages/TreeView/Examples/TreeViewSomeExpanded.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Flowers
<FluentTreeItem>Daisy</FluentTreeItem>
<FluentTreeItem>Sunflower</FluentTreeItem>
Expand Down
14 changes: 8 additions & 6 deletions examples/FluentUI.Demo.Shared/Pages/TreeView/TreeViewPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,16 @@

<h2>Examples</h2>

<DemoSection Title="Default with event handling" Component="@typeof(TreeViewDefault)"></DemoSection>
<DemoSection Title="Default with event handling" Component="@typeof(TreeViewDefault)"/>

<DemoSection Title="Flat tree" Component="@typeof(TreeViewFlat)"></DemoSection>
<DemoSection Title="Flat tree" Component="@typeof(TreeViewFlat)"/>

<DemoSection Title="Some expanded" Component="@typeof(TreeViewSomeExpanded)"></DemoSection>
<DemoSection Title="Some expanded" Component="@typeof(TreeViewSomeExpanded)"/>

<DemoSection Title="Pre-selected tree item" Component="@typeof(TreeViewSelectedItem)"></DemoSection>
<DemoSection Title="Pre-selected tree item" Component="@typeof(TreeViewSelectedItem)"/>

<DemoSection Title="Disabled tree item" Component="@typeof(TreeViewDisabledItem)"></DemoSection>
<DemoSection Title="Disabled tree item" Component="@typeof(TreeViewDisabledItem)"/>

<DemoSection Title="With several nested items (expanded)" Component="@typeof(TreeViewNested)"></DemoSection>
<DemoSection Title="With several nested items (expanded)" Component="@typeof(TreeViewNested)"/>

<DemoSection Title="With data binding" Component="@typeof(TreeViewDataBinding)"/>
1 change: 1 addition & 0 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/ApiDocumentation.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
<TemplateColumn Title="Type">
@context.Type


@* Display list of Enumerations (if available) *@
@if (context.EnumValues.Length > 0)
{
Expand Down
3 changes: 3 additions & 0 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewDataBinding.razor.js.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function hahaha(element) {
console.log(element);
}
47 changes: 47 additions & 0 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewDataBinding.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<FluentStack Orientation="@Orientation.Horizontal">
<FluentTreeView>
<FluentTreeItem @bind-Expanded=@FlowersExpanded>
Flowers
<FluentTreeItem @bind-Selected=DaisySelected>Daisy</FluentTreeItem>
<FluentTreeItem @bind-Selected=SunflowerSelected>Sunflower</FluentTreeItem>
<FluentTreeItem @bind-Selected=RoseSelected>Rose</FluentTreeItem>
</FluentTreeItem>
<FluentTreeItem @bind-Expanded=@PlanesExpanded>
Planes
<FluentTreeItem>Tomcat</FluentTreeItem>
<FluentTreeItem>Hawker Harrier</FluentTreeItem>
<FluentTreeItem>Cesna</FluentTreeItem>
</FluentTreeItem>
</FluentTreeView>
<FluentStack Orientation="@Orientation.Vertical">
<h2>Expanded</h2>
<FluentCheckbox @bind-Value=FlowersExpanded>
<span aria-label="Flowers expanded">Flowers expanded</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=PlanesExpanded>
<span aria-label="Planes expanded">Planes expanded</span>
</FluentCheckbox>
</FluentStack>
<FluentStack Orientation="@Orientation.Vertical">
<h2>Selected</h2>
<FluentCheckbox @bind-Value=DaisySelected>
<span aria-label="Daisy selected">Daisy selected</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=SunflowerSelected>
<span aria-label="Sunflower selected">Sunflower selected</span>
</FluentCheckbox>
<FluentCheckbox @bind-Value=RoseSelected>
<span aria-label="Rose selected">Rose selected</span>
</FluentCheckbox>
</FluentStack>
</FluentStack>

@code
{
bool FlowersExpanded = true;
bool PlanesExpanded = true;

bool DaisySelected = false;
bool SunflowerSelected = true;
bool RoseSelected = false;
}
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewDisabledItem.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentTreeItem>
Flowers
Expand Down
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewFlat.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<FluentTreeView RenderCollapsedNodes=true>
<FluentTreeItem Selected="true">Daisy</FluentTreeItem>
<FluentTreeItem InitiallySelected="true">Daisy</FluentTreeItem>
<FluentTreeItem>Sunflower</FluentTreeItem>
<FluentTreeItem>Rose</FluentTreeItem>
<FluentDivider></FluentDivider>
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewNested.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="start" />
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Nested Root item 1
<FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="start" />
<FluentTreeItem>
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/TreeViewSelectedItem.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<FluentTreeView>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Root item
<FluentTreeItem>
Flowers
<FluentTreeItem>Daisy</FluentTreeItem>
<FluentTreeItem>Sunflower</FluentTreeItem>
<FluentTreeItem>Rose</FluentTreeItem>
</FluentTreeItem>
<FluentTreeItem Expanded="true">
<FluentTreeItem InitiallyExpanded="true">
Planes
<FluentTreeItem Selected="true">Tomcat</FluentTreeItem>
<FluentTreeItem>Hawker Harrier</FluentTreeItem>
Expand Down
Loading