Tree
1. Demo AstrolTree
Note
This example implements notifications, so it is recommended to see the corresponding documentation.
This example implements notifications, so it is recommended to see the corresponding documentation.
- Project
- Design
- Photos
- site.psd
- Implementation
- script.js
- index.html
- styles.css
- Design
@using Astrol.Component.FileExplorer.Tree@using Astrol.Entities.Basic.Static.Notification@using Astrol.JSInterop.Base@inject AstrolJSInterop jsI <AstrolTree TItem="TreeItem" DataList="items" PropertyShow="@nameof(TreeItem.Text)" PropertyIcon="@nameof(TreeItem.Icon)" PropertyExpansed="@nameof(TreeItem.DefaultExpanse)" PropertyChildrenList="@nameof(TreeItem.Children)" OnClick="SelectItem" />@code { private async Task SelectItem(TreeItem item) { await jsI.Notification($"The item has been selected: {item.Text}.".NotificationSucces()); } private List<TreeItem> items = new List<TreeItem> { new TreeItem() { Text = "Project", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "Design", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "Photos", Icon = "astrol-folder-empty", Children = new List<TreeItem> { new TreeItem() { Text = "logo.jpg", Icon = "astrol-file-image" }, new TreeItem() { Text = "front page.png", Icon = "astrol-file-image" }, }, }, new TreeItem() { Text = "site.psd", Icon = "astrol-doc" }, }, }, new TreeItem() { Text = "Implementation", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "script.js", Icon = "astrol-file-code" }, new TreeItem() { Text = "index.html", Icon = "astrol-file-code" }, new TreeItem() { Text = "styles.css", Icon = "astrol-file-code" }, }, }, }, }, }; public class TreeItem { public string Text { get; set; } public List<TreeItem> Children { get; set; } public string Icon { get; set; } public bool DefaultExpanse { get; set; } }}Supported parameters
- TItem (object), the object to be represented.
- PropertyShow (string), property of the TItem object to display.
- PropertyIcon (string), property of the TItem object that contains the icon (not required).
- DefaultIcon (string), parameter that allows setting a unique icon for all elements (not required and takes precedence over PropertyIcon).
- PropertyExpanded (string), property of the TItem object that determines if the component is initially expanded. It is not required, and if not set, the components are closed by default (not required).
- PropertyChildrenList (string), property of the TItem object that contains the list of children (not required).
- DataList (List<TItem>), the total list of TItem objects to display.
- OnClick (EventCallback<TItem>), response to the TItem object selected by the user.
Public methods
- Refresh: Allows refreshing the component without altering its current state using <AstrolTree @ref="_tree" ... />. Declare _tree within @code { private TreeItem
? _tree; } . It is advisable, before invoking the _tree.Refresh() method, to also assign the updated data list with _tree.DataList = updateList;.
© 2025 AstrolUI v8.0.4