Completed
Last Updated: 13 Mar 2020 11:40 by ADMIN
Release 2.7.0
Patrick
Created on: 10 Oct 2019 21:48
Category: TreeView
Type: Feature Request
8
Binding to ObservableCollection

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.

6 comments
ADMIN
Svetoslav Dimitrov
Posted on: 13 Mar 2020 11:40

Hello Joel,

To achieve similar behavior of the TreeView, where you can apply custom logic to the selected item or items, you can go in the following two directions as discussed in this thread: https://www.telerik.com/forums/get-selected-node-44e79119f873

That being said, the discussed approaches are workarounds as this is a Feature Request that can be viewed here: https://feedback.telerik.com/blazor/1427582-select-and-multiple-select-of-items. To receive email notifications on the status updates you can Follow it.

The Selected property in the demo is just a naming which was used as the most appropriate (and meaningful) one for the purposes of the code snippet.

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor
Joel
Posted on: 10 Mar 2020 14:36

Svetoslav,

The example you provided is good.  However, as I'm sure you realized when you made the example, having the "CreateItem" method frozen to create a child only under "Item 1" is not that useful. 

It seems we are missing an "OnSelected" event pertaining to a node that is selected.  I would then expect to store what is selected into a "SelectedItem" property.  Then, "CreateItem" would perform the action against the SelectedItem.

Your TreeItem object contains a "bool Selected" property that I would also expect to react to the "OnSelected" event.

Thanks for your help,

Joel

 

ADMIN
Svetoslav Dimitrov
Posted on: 05 Mar 2020 15:49

Hello Joel,

Bellow, you will see a working demo of TreeView with ObservableCollection and buttons to add or delete a custom item. 

@using System.Collections.ObjectModel

<TelerikButton Primary="true" OnClick="CreateItem">Create item</TelerikButton>

<TelerikButton Primary="true" OnClick="DeleteItem">Delete item</TelerikButton>

<TelerikTreeView Data="@TreeData">
</TelerikTreeView>

@code {
    private void CreateItem()
    {
        TreeData[0].Items.Add(new TreeItem()
        {
            Text = "My item",
            HasChildren = false,
            Expanded = false
        });
    }

    private void DeleteItem()
    {
        if(TreeData[0].Items.Count > 0)
            TreeData[0].Items.RemoveAt(TreeData[0].Items.Count - 1);
    }

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

    public class TreeItem
    {
        public string Text { get; set; }
        public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();
        public bool Expanded { get; set; }
        public bool HasChildren { get; set; }
        public bool Selected { get; set; }

    }

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

    private void LoadHierarchical()
    {
        ObservableCollection<TreeItem> roots = new ObservableCollection<TreeItem>() {
            new TreeItem { Text = "Item 1", Expanded = true, HasChildren = true },
            new TreeItem { Text = "Item 2", HasChildren = true }
        };

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 first child",

        });

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 second child",

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 first child",

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 second child",

        });

        TreeData = roots;
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor
Joel
Posted on: 04 Mar 2020 22:57
I see this is in Release 2.7.0.  Do you have a working example?
Igor
Posted on: 13 Dec 2019 09:04

I have created feature request:

https://feedback.telerik.com/blazor/1446090-data-binding-as-in-wpf-and-xamarin-for-the-all-controls

ADMIN
Marin Bratanov
Posted on: 11 Oct 2019 07:32

Hi Patrick,

At the moment, only the grid supports binding to an observable collection. Technically, you could bind the tree to an observable collection, but it does not subscribe to its Changed event so it won't get updated data after the initial render.

I moved this to the public feedback portal so you can Follow its implementation. Here's a link for you: https://feedback.telerik.com/blazor/1433824-binding-to-observablecollection.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor