Reputation: 1315
I'm using Telerik Blazor TreeView Component in my Blazor C# code to display hierarchical data. Facing 2 issues with it, viz: (i) All child nodes are highlighted with a blue color although I'm not applying any style explicitly (ii) Nodes which doesn't have any children have an expand icon beside them which is not what I want.
How can I go about these 2 fixes, any suggestions?
Below is my code snippet:
Component.razor:
<TelerikTreeView Data="@HierarchicalData"
SelectionMode="@TreeViewSelectionMode.None"
@bind-ExpandedItems="@ExpandedItems"
@bind-SelectedItems="@SelectedItems">
<TreeViewBindings>
<TreeViewBinding TextField="PageName" ItemsField="ChildPages">
<ItemTemplate>
@{
var item = (Page)context;
if (item.IsNavigable)
{
<a @onclick="@(async () => await NavigateToPage(item))">@item.PageName</a>
}
else
{
<a>@item.PageName</a>
}
}
</ItemTemplate>
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
Component.razor.cs:
private IEnumerable<object> ExpandedItems { get; set; } = new List<NavigablePage>();
private IEnumerable<object> SelectedItems { get; set; } = new List<NavigablePage>();
protected override async Task OnInitializedAsync()
{
// lines of code
var jsonResult = await _dataService.GetHierarchicalData(formRequest);
HierarchicalData = jsonResult.ToObject<List<Page>>();
await base.OnInitializedAsync();
}
public record Page
{
public Guid PageUniqueId { get; set; }
public string PageName { get; set; }
public bool IsListPage => ChildPages.Any();
public bool IsNavigable { get; set; }
public int SortOrder { get; set; }
public List<Page> ChildPages { get; set; }
}
Upvotes: 0
Views: 42