Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Auto-expand and auto-scroll in MudBlazor with MudTree

$
0
0

I am trying to create a Comments component which renders comments, but the comments can have nested comments, and I want to be able to fetch the child comments only if the users clicks on the parent comment, hence the loop.There is an issue with this, because it creates a new TreeView for each comment, but I must have the comment Id in order to fetch the child comments and I can't do anything about how the api is created, because I am aware that this is not the optimal way of fetching nested comments.

This setup works, but because it creates many TreeViews, when a child component is expanded, it squeezes the rest of the trees and it does not look optimal.Second, I want to be able to auto expand, and scroll to item at a TreeViewItem with a given id. I tested with a fixed id, but it does not auto expand to that item.

Below is my code, and if you have any suggestions, please let me know.

@foreach(var item in comments){<MudTreeView Hover ExpandOnClick                    SelectionMode="SelectionMode.SingleSelection"                    AutoExpand @bind-SelectedValue="SelectedValue"                    ServerData="@((e) => LoadServerData(e, item.Id))"                    Items="@InitialTreeItems"><MudTreeViewItem Value="@item.content">                    @foreach(var exp in childComments.expand)                    {<MudTreeViewItem id="@exp.parentId" Class="my-1" Value="@exp.commentId" Text="@exp.content" ExpandedChanged="() => GetCommentsByParentId(exp.parentId)"><ExternalCard /></MudTreeViewItem>                    }</MudTreeViewItem></MudTreeView>}@code {    private List<TreeItemData<string>> InitialTreeItems { get; set; } = new();    private List<TreeItemData<string>> ServerTreeItems { get; set; } = new();    public string SelectedValue = null;    public List<Comment> comments;    public List<Comment> childComments;}// comments and child comments gets populated on demand.protected override void OnInitialized(){    // Initialize top-level items}public async Task<IReadOnlyCollection<TreeItemData<string>>> LoadServerData(string parentValue){    // populates comments;}private async Task GetCommentsByParentId(string commentId){    // populates childComments;}

I have been experimenting with this and this snippets from MudBlazor official documentation site.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>