by SamProf
@page "/" @* <style> ul.default-tree-view-ul { margin-left: 15px; } /* ul.duration-treeview-item:last-of-type{ margin-bottom :5px; }*/ ul div.Duration-treeview-item { color: grey; } </style> <TreeView @ref="treeViewRef" Items="SupplierTreeNodesNormalized" GetParent="GetSupplierParent" AllowSelection="true" @bind-SelectedItems="SelectedPlans" T="SupplierPlanListItem" ItemClass="SupplierPlanListItem"> <ItemTemplate> <div class="@($"{context.Item.Type}-treeview-item")"> <label class="form-check-label">@getDisplayText(context.Item)</label> </div> </ItemTemplate> </TreeView> <pre> @selectedPlansString </pre> *@ @code{ public enum ItemType { Supplier, Product, Duration } public class SupplierPlanListItem { public int Id { get; set; } public int? ParentId { get; set; } public string SupplierName { get; set; } public int? Duration { get; set; } public string Product { get; set; } /// <summary> /// should it be selected by default /// </summary> public bool Selected { get; set; } = false; public ItemType Type //{ get => ParentId.HasValue ? ItemType.Product : ItemType.Supplier; } //{ get; set; } { get { if (!ParentId.HasValue) return ItemType.Supplier; return Duration.HasValue ? ItemType.Duration : ItemType.Product; } } } protected override async Task OnParametersSetAsync() { await base.OnParametersSetAsync(); //SelectedPlans.Clear(); //SelectedPlans.Add(gp36); //SelectedPlans.AddRange(SupplierTreeNodesNormalized.Where(x => x.Selected)); //.ToList(); var supplierIds = SupplierTreeNodesNormalized.Where(x => x.ParentId != null).Select(x => x.ParentId).Distinct(); var selectedSuppliers = SupplierTreeNodesNormalized.Where(x => x.Type == ItemType.Supplier && supplierIds.Contains(x.Id)); SelectedPlans = SupplierTreeNodesNormalized.Where(x => x.Selected).ToList(); //treeViewRef.SelectedItems = SelectedPlans; StateHasChanged(); } protected TreeView<SupplierPlanListItem> treeViewRef {get;set;} static SupplierPlanListItem gp36 = new SupplierPlanListItem { Id = 43, ParentId = 1, Duration = 36, Selected = true }; public List<SupplierPlanListItem> SupplierTreeNodesNormalized = new List<SupplierPlanListItem> { new SupplierPlanListItem{ Id = 1, SupplierName = "Gazprom" }, new SupplierPlanListItem{ Id = 41, ParentId =1, Duration = 12}, new SupplierPlanListItem{ Id = 42, ParentId =1, Duration = 24 }, gp36, new SupplierPlanListItem{ Id = 44, ParentId =1, Duration = 48}, new SupplierPlanListItem{ Id = 2, ParentId =1, Product = "CL", Selected = true },//SupplierName = "Gazprom" }, new SupplierPlanListItem{ Id = 3, ParentId =1, Product = "CL Plus", Selected = true }, new SupplierPlanListItem{ Id = 4, ParentId =1, Product = "EL", Selected = true }, new SupplierPlanListItem{ Id = 5, ParentId =1, Product = "Direct", Selected = true }, new SupplierPlanListItem{ Id = 6, ParentId =1, Product = "Low SC", Selected = true }, new SupplierPlanListItem{ Id = 7, SupplierName = "EDF" }, new SupplierPlanListItem{ Id = 14, ParentId =7, Duration = 12}, new SupplierPlanListItem{ Id = 24, ParentId =7, Duration = 24}, new SupplierPlanListItem{ Id = 34, ParentId =7, Duration = 36, Selected = true }, new SupplierPlanListItem{ Id = 44, ParentId =7, Duration = 48}, new SupplierPlanListItem{ Id = 8, ParentId =7, Product = "Default", Selected = true }, new SupplierPlanListItem{Id = 9, SupplierName = "Scottish And Southern", Selected = true }, new SupplierPlanListItem{ Id = 10, ParentId =9, Duration = 12}, new SupplierPlanListItem{ Id = 11, ParentId =9, Duration = 24}, new SupplierPlanListItem{ Id = 12, ParentId =9, Duration = 36, Selected = true}, new SupplierPlanListItem{ Id = 13, ParentId =9, Duration = 48}, new SupplierPlanListItem{ Id = 14, ParentId =9, Product = "Choice", Selected = true }, new SupplierPlanListItem{ Id = 15, ParentId =9, Product = "Protect", Selected = true }, }; public List<SupplierPlanListItem> _selectedPlans { get; set; } = new List<SupplierPlanListItem>(); public List<SupplierPlanListItem> SelectedPlans //{ get; set; } = new List<SupplierPlanListItem>(); { get => _selectedPlans; set { _selectedPlans = value; try { var supplierIds = value.Where(x => x.ParentId != null).Select(x => x.ParentId).Distinct(); var selectedSuppliers = SupplierTreeNodesNormalized.Where(x => x.Type == ItemType.Supplier && supplierIds.Contains(x.Id)); var durations = value.Where(x => x.Type == ItemType.Duration); var products = value.Where(x => x.Type == ItemType.Product); var results = from s in selectedSuppliers join d in durations on s.Id equals d.ParentId into sd from o in sd.DefaultIfEmpty() join p in products on o?.ParentId equals p.ParentId into sdp from r in sdp.DefaultIfEmpty() select new SupplierPlanListItem { Id = s.Id, SupplierName = s.SupplierName, Duration = o?.Duration, Product = r?.Product }; /// todo - reorder this so that its joined by product first then duration to make the order of the results nicer /// try to zip the durations into 1 row? /// look into performance and cpu cost of doing this for every click - suggest button to fetch the data once ready (as gasprom dont use the api) selectedPlansString = Newtonsoft.Json.JsonConvert.SerializeObject(results); } catch { } } } protected string selectedPlansString { get; set; } public SupplierPlanListItem GetSupplierParent(SupplierPlanListItem item) { if (!item.ParentId.HasValue) return null; return SupplierTreeNodesNormalized.FirstOrDefault(x => x.Id == item.ParentId.Value); } public string getDisplayText(SupplierPlanListItem item) { if (item.Type == ItemType.Duration) return $"{item.Duration.ToString()} Months"; return item.Type == ItemType.Supplier ? item.SupplierName : item.Product; } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.