The Inquisitive Coder
The Inquisitive Coder

Reputation: 1315

Issues with Blazor Treeview

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

Answers (0)

Related Questions