Skip to content

Commit

Permalink
🆕 feat(Treeview): add support for selecting on row click (#2064)
Browse files Browse the repository at this point in the history
  • Loading branch information
@capdiem
capdiem authored Jul 24, 2024
1 parent 54bb4bf commit 683fb41
Show file tree
Hide file tree
Showing 9 changed files with 175 additions and 127 deletions.
224 changes: 123 additions & 101 deletions docs/Masa.Blazor.Docs/Examples/components/treeview/Selectable.razor
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<MTreeview TItem="Data" TKey="int" Selectable @bind-Value="_value" Items="_data" ItemText="r=>r.Name" ItemChildren="r=>r.Children" ItemKey="r=>r.Id">
<MSwitch Label="Select on row click" @bind-Value="@_selectOnRowClick"></MSwitch>

<MTreeview TItem="Data"
TKey="int"
Selectable
SelectOnRowClick="_selectOnRowClick"
@bind-Value="_value"
Items="_data"
ItemText="r => r.Name"
ItemChildren="r => r.Children"
ItemKey="r => r.Id">
</MTreeview>

@code {
public class Data
{
public int Id { get; set; }

public string Name { get; set; }

public List<Data> Children { get; set; }
}
private bool _selectOnRowClick = true;

private List<int> _value = new List<int>
{
Expand All @@ -20,146 +23,165 @@
{
new Data
{
Id=1,
Name="Applications :",
Children=new List<Data>
Id = 1,
Name = "Applications :",
Children = new List<Data>
{
new Data
{
Id=2,
Name="Calendar : app"
},
new Data
{
Id=3,
Name="Chrome : app"
},
new Data
{
Id=4,
Name="Webstorm : app"
}
new Data
{
Id = 2,
Name = "Calendar : app"
},
new Data
{
Id = 3,
Name = "Chrome : app"
},
new Data
{
Id = 4,
Name = "Webstorm : app"
}
}
},
new Data
{
Id=5,
Name="Documents :",
Children=new List<Data>
Id = 5,
Name = "Documents :",
Children = new List<Data>
{
new Data
new Data
{
Id = 6,
Name = "MASA Blazor :",
Children = new List<Data>
{
Id=6,
Name="MASA Blazor :",
Children=new List<Data>
new Data
{
new Data
Id = 7,
Name = "src :",
Children = new List<Data>
{
Id=7,
Name="src :",
Children=new List<Data>
new Data
{
Id = 8,
Name = "index : ts"
},
new Data
{
new Data
{
Id=8,
Name="index : ts"
},new Data
{
Id=9,
Name="bootstrap : ts"
}
Id = 9,
Name = "bootstrap : ts"
}
}
}
},
new Data
}
},
new Data
{
Id = 10,
Name = "material2 :",
Children = new List<Data>
{
Id=10,
Name="material2 :",
Children=new List<Data>
new Data
{
new Data
Id = 11,
Name = "src :",
Children = new List<Data>
{
Id=11,
Name="src :",
Children=new List<Data>
new Data
{
Id = 12,
Name = "MButton : cs"
},
new Data
{
Id = 13,
Name = "MCard : cs"
},
new Data
{
new Data
{
Id=12,
Name="MButton : cs"
},new Data
{
Id=13,
Name="MCard : cs"
},new Data
{
Id=14,
Name="MWindow : cs"
}
Id = 14,
Name = "MWindow : cs"
}
}
}
}
}
}
},
new Data
{
Id=15,
Name="Downloads :",
Children=new List<Data>
Id = 15,
Name = "Downloads :",
Children = new List<Data>
{
new Data
{
Id=16,
Name="October : pdf"
},new Data
Id = 16,
Name = "October : pdf"
},
new Data
{
Id=17,
Name="November : pdf"
},new Data
Id = 17,
Name = "November : pdf"
},
new Data
{
Id=18,
Name="Tutorial : html"
Id = 18,
Name = "Tutorial : html"
}
}
},
new Data
{
Id=19,
Name="Videos :",
Children=new List<Data>
Id = 19,
Name = "Videos :",
Children = new List<Data>
{
new Data
{
Id=20,
Name="Tutorials :",
Children=new List<Data>
Id = 20,
Name = "Tutorials :",
Children = new List<Data>
{
new Data
{
Id=21,
Name="Basic layouts : mp4"
},new Data
Id = 21,
Name = "Basic layouts : mp4"
},
new Data
{
Id=22,
Name="Advanced techniques : mp4"
},new Data
Id = 22,
Name = "Advanced techniques : mp4"
},
new Data
{
Id=23,
Name="All about app : dir"
Id = 23,
Name = "All about app : dir"
}
}
},new Data
},
new Data
{
Id=24,
Name="Intro : mov"
},new Data
Id = 24,
Name = "Intro : mov"
},
new Data
{
Id=25,
Name="Conference introduction : avi"
Id = 25,
Name = "Conference introduction : avi"
}
}
}
};
}


private class Data
{
public int Id { get; set; }

public string Name { get; set; }

public List<Data> Children { get; set; }
}
}
4 changes: 3 additions & 1 deletion docs/Masa.Blazor.Docs/wwwroot/pages/components/treeview/en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,12 @@ Setting `Rounded` prop You can make treeview nodes rounded.

<masa-example file="Examples.components.treeview.Rounded"></masa-example>

#### Selectable
#### Selectable {updated-in=v1.7.0}

Setting `Selectable` prop You can easily select treeview nodes and children.

> Starting from v1.7.0, the `SelectOnRowClick` prop has been added, and its default value is `true` to select nodes on row click.
<masa-example file="Examples.components.treeview.Selectable"></masa-example>

#### SelectColor
Expand Down
Loading

0 comments on commit 683fb41

Please sign in to comment.