Data have been added, but nothing updated ?

[Yordan]

@page "/treeview-features"

@using Sledi.Core.DataModels.Proxies;

@using Syncfusion.Blazor.Navigations

<div class="control-section" @ref="shellDiv" id="shellDivBusses" >

    <div class="control_wrapper">

        <Syncfusion.Blazor.Buttons.SfButton OnClick="onBtnClick" />

        <SfTreeView ID="tree" TValue="TreeProxyDataModel" ShowCheckBox="true" HtmlAttributes="@htmlAttribute" @ref="tree">

            <TreeViewEvents TValue="@(TreeProxyDataModel )" NodeChecked="@onCheckNode"></TreeViewEvents>

            <TreeViewFieldsSettings Id="@( nameof( TreeProxyDataModel.Id ) )"

                                    Text="@( nameof( TreeProxyDataModel.Caption ) )"

                                    ParentID="@( nameof( TreeProxyDataModel.GroupID ) )"

                                    HasChildren="@( nameof( TreeProxyDataModel.HasChild ) )"

                                    Expanded="@( nameof( TreeProxyDataModel.Expanded ) )"

                           

                           

                                    DataSource="@busesData"></TreeViewFieldsSettings>

            

        </SfTreeView>

    </div>

</div>

@code

{

    List<TreeProxyDataModel> busesData { set; get; } = new List<TreeProxyDataModel>();

    public TreeProxyDataModel ModelType = new TreeProxyDataModel();

    SfTreeView<TreeProxyDataModel> tree;

    protected override void OnInitialized()

    {

        base.OnInitialized();

    }

    public  void onBtnClick()

    {

        busesData.Add( new TreeProxyDataModel

        {

            Id = 111,

            Caption = "Australia",

            Expanded = true,

            HasChild = true,

        } );

        for( var c = 0; c < 300; c++ )

        {

            busesData.Add( new TreeProxyDataModel

            {

                Id = c,

                Caption = c.ToString(),

                GroupID = 111,

                Selected = true

            } );

        }

    tree.Refresh();

    }

    ElementReference shellDiv;

    private void onMainContainerScroll( System.EventArgs e )

    {

        // menu.Close();

    }

    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()

        {

        { "style", "width: 100%; height:500px; overflow-y:scroll; overflow-x:hidden;" }

    };

    public void onCheckNode( NodeCheckEventArgs o )

    {

    }

}

When I press the button nothing happens.

[Yordan]

Is the TreeView bugged ?

[Muthukrishnan Kandasamy]

Hi Yordan, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your reported problem in Syncfusion Blazor TreeView component. Since, you have added tree nodes directly to TreeView component data source variable. We would like to let you know that, when adding or removing any nodes directly in the data source variable for updating TreeView component then it will not update the data source variable. Since, TreeView component data source has one-way binding support, only. To add the tree nodes dynamically using button click, we suggest you to use TreeView component’s AddNodes method. Please refer to the below code block. 

 

[Index.razor] 

 

@page "/" 

 

@using Syncfusion.Blazor 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Navigations 

 

@using Syncfusion.Blazor.Navigations 

<SfButton OnClick="onBtnClick">Add</SfButton> 

<SfTreeView TValue="MusicAlbum" ShowCheckBox="true" AutoCheck="true" @ref="tree"> 

    <TreeViewFieldsSettings TValue="MusicAlbum" Id="Id" DataSource="@Albums" Text="Caption" ParentID="ParentId" HasChildren="HasChild" Expanded="Expanded" IsChecked="IsChecked"></TreeViewFieldsSettings> 

</SfTreeView> 

 

 

 

@code{ 

    public class MusicAlbum 

    { 

        public int Id { get; set; } 

        public int? ParentId { get; set; } 

        public string Caption  { get; set; } 

        public bool Expanded { get; set; } 

        public bool? IsChecked { get; set; } 

        public bool HasChild { get; set; } 

    } 

    SfTreeView<MusicAlbum> tree; 

    List<MusicAlbum> Albums = new List<MusicAlbum>(); 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

    } 

 

    void onBtnClick() 

    { 

        List<object> TreeData = new List<object>(); 

        TreeData.Add(new 

        { 

            Id = 1, 

            Caption = "Australia", 

            HasChild = true, 

        }); 

        for( var c = 0; c < 300; c++ ) 

        { 

            TreeData.Add(new 

            { 

                Id = c, 

                Caption = c.ToString(), 

                ParentId = 1, 

            }); 

        } 

        this.tree.AddNodes(TreeData, 1, null, false); 

    } 

} 

 

 

We have attached sample for your convenience, which can be downloaded from the below link. 

 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeData-957949510 

 

 

Please refer the below screenshot of attached sample. 

 

 

 

 

Description	Link
Getting started	https://blazor.syncfusion.com/documentation/treeview/getting-started/
Data binding	https://blazor.syncfusion.com/documentation/treeview/data-binding/
Add node using context menu	https://blazor.syncfusion.com/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/
API reference	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[ashimaz]

Treeview not rendering data if I use await statement 

var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();

Kindly help...

protected override async void OnInitialized()

    {

        base.OnInitialized();

        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();

        //var user = authState.User;

        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" }); 

        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" });

        this.Child = "SubFolders";

    }

[Yordan]

Muthukrishnan Kandasamy [Syncfusion]

Thank You very much for your example !

so generally just updating only the data source will not work as I understand.

[Sowmiya Padmanaban]

Hi Ashimaz,  

  

We have checked your reported problem with TreeView component. We are able to reproduce it. We have consider this as feature improvement task in TreeView component. This feature will be included in Volume 3 release which is expected to be released at the end of September 2020. 

  

Track the below link to know the feature status. 

 

https://www.syncfusion.com/feedback/15027/datasource-in-treeview-is-not-binded-to-the-treeview-component-when-declaring 

  

Until then, we suggest you to declare the await method after defining the datasource for TreeView component. 

  

We appreciate your patience. 

  

Regards,  

Sowmiya.P