1. Home
  2. Forum
  3. Blazor
  4. Refreshing the DataSource does not refresh the component state

Refreshing the DataSource does not refresh the component state

Hi,


If I set the DataSource of a TreeView with an ObservableCollection<T> (or a List<T>) I cannot change the selected item (or refresh the state) by using a new ObservableCollection or List.


I would want the TreeView to react when the collection changes.

In this repro, try to select a node, then click on the update button, the selected node won't change : https://blazorplayground.syncfusion.com/LZBJNzNWJSKzbJBW


Code :

@using Syncfusion.Blazor.Navigations
@using System.Collections.ObjectModel
<SfTreeView TValue="MailItem" @ref="tree">
    <TreeViewFieldsSettings TValue="MailItem" Id="Id" Text="FolderName" Child="SubFolders" DataSource="@MyFolder" Expanded="Expanded" Selected="Selected"></TreeViewFieldsSettings>
</SfTreeView>

<button @onclick="Update">update</button>

@if (MyFolder != null) {
    @foreach (var item in MyFolder) {
        @if (item.Selected) {
            <div>Selected : @item.FolderName</div>
        }
    }
}

@code{
    private SfTreeView<MailItem> tree;
    public class MailItem
    {
        public string Id { get; set; }
        public string FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool Selected {get;set;}
        public List<MailItem> SubFolders { get; set; }
    }
    ObservableCollection<MailItem> MyFolder = new();

private async Task Update()
{
    MyFolder = new(MyFolder.ToList());
    MyFolder.First().Selected = true;
    //await tree.ClearStateAsync();
}

    protected override void OnInitialized()
    {
        base.OnInitialized();
        List<MailItem> Folder1 = new List<MailItem>();
        MyFolder.Add(new MailItem
        {
            Id = "01",
            FolderName = "Inbox",
            SubFolders = Folder1
        });

        List<MailItem> Folder2 = new List<MailItem>();

        Folder1.Add(new MailItem
        {
            Id = "01-01",
            FolderName = "Categories",
            SubFolders = Folder2
        });
        Folder2.Add(new MailItem
        {
            Id = "01-02",
            FolderName = "Primary"
        });
        Folder2.Add(new MailItem
        {
            Id = "01-03",
            FolderName = "Social"
        });
        Folder2.Add(new MailItem
        {
            Id = "01-04",
            FolderName = "Promotions"
        });

        List<MailItem> Folder3 = new List<MailItem>();

        MyFolder.Add(new MailItem
        {
            Id = "02",
            FolderName = "Others",
            Expanded = true,
            SubFolders = Folder3
        });
        Folder3.Add(new MailItem
        {
            Id = "02-01",
            FolderName = "Sent Items",
            Selected = false
        });
        Folder3.Add(new MailItem
        {
            Id = "02-02",
            FolderName = "Delete Items"
        });
        Folder3.Add(new MailItem
        {
            Id = "02-03",
            FolderName = "Drafts"
        });
        Folder3.Add(new MailItem
        {
            Id = "02-04",
            FolderName = "Archive"
        });
    }
}


Ideally I don't want to play with the ref because my TreeView is in a generic component and the components using it just need to pass a new collection and it changes the state. If I clear the state on the OnParametersSet it will clear event when other parameters of my generic component change.


Regards


3 Replies 1 reply marked as answer
JA Jafar Ali Shahulhameed Syncfusion Team April 2, 2024 12:52 PM UTC

Hi Julien,


Based on the shared details we can understand that you are trying to utilize Syncfusion TreeView component and trying to select the nodes dynamically. We have prepared sample to meet your requirements. We have achieved your requirement by making use of the SelectedNodes property. Kindly refer the code changes below,


<SfTreeView TValue="MailItem" @ref="tree" @bind-SelectedNodes="selectedNodes">

</SfTreeView>

 

private async Task Update()

{

    MyFolder = new(MyFolder.ToList());

    MyFolder.First().Selected = true;

    selectedNodes = new string[] { MyFolder.First().Id };

}


We have attached the sample for your reference,


Sample: https://blazorplayground.syncfusion.com/LtrzDftLJexnmgpN


Kindly check out the shared details and get back to us if you need further assistance.


Regards,

Jafar


Marked as answer
JB Julien Barach April 3, 2024 04:10 PM UTC

Hi,


Refreshing the DataSource Collection should be enough to manipulate the state of the SfTreeView component.

Maintining the SelectedNodes forces us to have some tricks in some cases.


But OK at least we have a solution to render the state correctly.


Thanks.


SS Shereen Shajahan Syncfusion Team April 4, 2024 06:01 AM UTC

Hi Julien,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen


Loader.
Up arrow icon