PSC.Blazor.Components.TreeView 8.0.1

TreeView component for Blazor

This component is a native Blazor TreeView component for Blazor WebAssembly and Blazor Server. The component is built with .NET7.

Installation

First, add the package to your project from NuGet.

Then, add the following line to your _Imports.razor:

@using PSC.Blazor.Components.TreeView

Usage

For adding the component to your page, use the following code:

<TreeView @key="version" Items="Items" 
          GetParent="GetParent" AllowSelection="true" 
		  @bind-SelectedItems="SelectedValues">
	<ItemTemplate>
		<div @onclick="() => { selectedItem = (selectedItem != context.Item) ? context.Item : null; }" 
		    style="background-color: @(selectedItem == context.Item ? "Highlight" : "inherit")">
 		        @context.Item
		</div>
	</ItemTemplate>
</TreeView>


@if (SelectedValues != null && SelectedValues.Any())
{
	<p>@string.Join(", ", SelectedValues)</p>
}

@code {
    private string? selectedItem;

	
	private List<string> SelectedValues = new List<string>
	{
		"3.1.1"
	};

	private List<string> Items = new List<string>
	{
		"1",
		"1.1",
		"1.2",
		"2",
		"3",
		"3.1",
		"3.1.1",
		"3.1.2"
	};

	private string GetParent(string item)
	{
		var last_period = item.LastIndexOf('.');
		if (last_period < 0)
		{
			return null; // no parent
		}
		else
		{
			return item.Substring(0, last_period);
		}
	}
}