How to Change the treenode Text, font size and color at runtime in Blazor?

1 Answer 14 Views
TreeView
Developer
Top achievements
Rank 1
Developer asked on 05 Aug 2022, 06:26 AM

Hi,

How to change the treenode Text, font size and color at runtime in Blazor? I am trying following code. I changed text in both data structures i.e.  FlatData and ExpandedItems. Text is being changed in data structure but change is not reflecting on UI.

 

 <TelerikTreeView OnItemClick="@OnItemClickHandler"  
                Data="@FlatData" @bind-ExpandedItems="@ExpandedItems">
                <TreeViewBindings>
                    <TreeViewBinding ParentIdField="ParentIdValue"></TreeViewBinding>
                </TreeViewBindings>
</TelerikTreeView>


@code{

public ObservableCollection<TreeItem> FlatData { get; set; }
public IEnumerable<object> ExpandedItems { get; set; }

protected override async Task OnInitializedAsync()
    {
        LoadFlatData();
      timer = new System.Threading.Timer(async _ => // async void
        {
        FlatData[0].Text = "Net";

        ExpandedItems = FlatData;
     
        // we need StateHasChanged() because this is an async void handler
        // we need to Invoke it because we could be on the wrong Thread
        await InvokeAsync(StateHasChanged);
        }, null, 0, 5000);
     }
}
        

1 Answer, 1 is accepted

Sort by
0
Hristian Stefanov
Telerik team
answered on 09 Aug 2022, 10:09 AM

Hi Developer,

I confirm the desired result is achievable by using the TreeView ItemTemplate.

Here is an example I have prepared to demonstrate:

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems">
    <TreeViewBindings>
        <TreeViewBinding>
            <ItemTemplate>
                @{
                    TreeItem itm = context as TreeItem;
                    <strong style="color: @itm.Color; font-size: @itm.FontSize">@itm.Text</strong>
                }
            </ItemTemplate>
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

@code {
    IEnumerable<TreeItem> FlatData { get; set; }
    IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        FlatData = GetFlatData();

        FlatData.ToList()[0].Text = "TEST";
        FlatData.ToList()[0].FontSize = "15px";
        FlatData.ToList()[0].Color = "red";

        ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();
    }

    List<TreeItem> GetFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
            {
                Id = 1,
                Text = "wwwroot",
                ParentId = null,
                HasChildren = true,
                Icon = "folder",
            });
        items.Add(new TreeItem()
            {
                Id = 2,
                Text = "css",
                ParentId = 1,
                HasChildren = true,
            });
        items.Add(new TreeItem()
            {
                Id = 3,
                Text = "js",
                ParentId = 1,
                HasChildren = true,
                Icon = "folder",
            });
        items.Add(new TreeItem()
            {
                Id = 4,
                Text = "site.css",
                ParentId = 2,
                Icon = "css"
            });
        items.Add(new TreeItem()
            {
                Id = 5,
                Text = "scripts.js",
                ParentId = 3,
                Icon = "js"
            });

        return items;
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public string FontSize { get; set; }
        public string Color { get; set; }
    }
}

You can extend the above approach on your own in the actual project to cover the scenario needs.

Regards,
Hristian Stefanov
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
TreeView
Asked by
Developer
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question
or