The TreeView should automatically update when a change in data fields occur. Changes in the `ItemsField`, `HasChildren` are crucial to be tracked to allow easy manipulation of data in binding to hierarchical data. This request will fulfill the observable collection support of the TreeView.

---

ADMIN EDIT

Changes in the ExpandedField of the element have been previously handled in the TreeView. However, this has been a side effect of incorrect code in our component that was causing performance hit. We reviewed our component and how it could provide better coverage in user scenarios, so here are our steps:

- Implement tracking of data item changes with ObservableCollection, so that we could fully support binding to observable data - click the Vote and Follow buttons on the current page to raise the priority of this feature implementation and to get notified for status updates.



We've been evaluating a major change where the ExpandedItems to be controlled via parameter/state. So, we would really appreciate if you could share feedback whether this change would be good for your project and use case.

- Implementation of ExpandedItems in TreeView to substitute ExpandedField in the collection: https://feedback.telerik.com/blazor/1448095-expanded-items-handling-feedback-requested

We believe that the above steps are the way to go with the maturing of the TreeView component.

A workaround could be reinitializing the Data when you update the property of the item, that will force the treeview to update:

TreeViewData = new List<MyModel>(TreeViewData)

---

If i collapse/expand any item of treeview then each item of collapsed/expanded branch will be rendered twice.

Clicking in or away from the treeview re-renders all nodes too.

The issue manifests both when

• using .Add() or .Remove() on an ObservableCollection
• creating a new List<T>(updatedData)

Happens in 2.14.1 first.

*** Thread created by admin on customer behalf ***

Add checkbox support at the node level.  Similar to...

https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/

Hi,

Is there a plan to support lines between treeview items as available in radtreeview?

radTreeView1.ShowLines = true;
radTreeView1.LineStyle = TreeLineStyle.DashDot;
 
Without this it is very confusing to the end user what the connections between open items are.
 
Regards,

peter
 
 
 
 

Hello,

I am trying to fill the TreeView using an async method. The first level is loaded an expanded. Subsequent levels are not. Or so it seams. They are loaded, but when expanding a node it expands and immediately collapses. Expanding a second time reveals the nodes loaded earlier.

I included a demo project. Open http://localhost:{port}/tree.

Best regards,

Marcel Gelijk

Repro plus workaround (already in):

<button @onclick="@SwitchDataSource">switch to other data source</button>

<TelerikTreeView Data="@FlatData">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" 
                         HasChildrenField="HasChildren" IconField="Icon">
            <ItemTemplate>
                @{
                    TreeItem currProduct = context as TreeItem;
                    @(currProduct.Text)
                }
            </ItemTemplate>
            </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }

    async void SwitchDataSource()
    {
        //workaround - remove it to see the actual error
        foreach (TreeItem item in FlatData)
        {
            item.Expanded = false;
        }
        StateHasChanged();
        await Task.Delay(300);//awaits the animation that will hide the nodes we just collapsed so their elements get properly disposed
        
        //change data
        LoadSecondDataSource();
        //update UI
        StateHasChanged();
    }

    public IEnumerable<TreeItem> FlatData { get; set; }

    protected override void OnInitialized()
    {
        LoadFlatData();
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }

    void LoadSecondDataSource()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "1",
            ParentIdValue = null,
            HasChildren = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "1 1",
            ParentIdValue = 1,
            HasChildren = true
        });


        //if you add this, there is no error because the levels match
        //if the new data source does not have the same number of (maybe expanded) levels
        //you will get an error while disposing those levels
        //items.Add(new TreeItem()
        //{
        //    Id = 3,
        //    Text = "1 1 1",
        //    ParentIdValue = 2
        //});



        FlatData = items;
    }
}

Hi everyone,

We created this item to request your feedback on how you use the treeview binding with regards to the Expanded state of the nodes.

At the moment, the treeview updates the field in the collection when an item gets expanded or collapsed, and that makes it unique in the suite - the other data bound components do not alter their data source silently, and this is the general pattern we want to follow in order to have consistency across the board.

Thus, there are several approaches we are considering and we want to get your take on how you would find this most comfortable:

• Keep the current situation where the treeview updates the ExpandedField in the Data silently [we would rather change it] - the Data collection gets changed automatically. To control an expanded item, prepare the data source accordingly.
• Use the OnExpand event to get the item and its new state in order to update the collection yourself if needed. If you don't use the field for anything but to control the state of the treeview, you will not need to change anything. To control an expanded item, prepare the data source accordingly when providing it to the treeview. If you will be reusing the same data source with alterations, you may have to handle the event to sync the state between the treeview and the data.
• Use an ExpandedItems collection [we are inclined to go with this approach at the moment] - this will be a collection that you can provide to the treeview separately from its data source, like the selected items in a grid. This will let you avoid an Expanded field in the data (which we believe may not be present in an actual database anyway) and you will be able to use business logic to determine which items to add/remove to that collection, this also includes nested levels, even added through load-on-demand.

I have an extensive WPF background and so I naturally use ObservableCollection for virtually all UI type binding scenarios.

However I noticed that it seems the TreeView control doesn't seem to work when bound that way.
I switched the property to an array instead and it worked with no other modifications.

I need to be able to multiselect items in a treeview and drag n drop to reorder items.

(Same as RadTreeView AJAX component)

Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.

=====================================

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button

<style>
    .k-mid:hover .showme {
        display: block;
    }

    .showme {
        display: none;
        margin-left: 10px;
    }

    .showhim:hover .showme {
        display: block;
    }
</style>


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
                <div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
                    <TelerikIcon IconName="@IconName.Plus" />
                </div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void NodeClicked(string node)
    {
        helloString = new MarkupString(node);
    }


    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}

======================================

Microsoft.JSInterop.JSException

I would like a node click event exposed from the treeview.

At the moment, you need to use a template. Example and considerations are available in the following forum thread: https://www.telerik.com/forums/row-click-and-double-click-events#PQpO8DcbzkCArF3UqoLcWA.

When using load-on-demand, you may not know how much data there is and how many levels deep it will go. You need the OnExpand event to fire for each node so you can call your services and retrieve data.

Unfortunately, it does not fire for the second level of nodes, so you cannot load data for them.