Adding a node to a treeview when using an SQL datasource

[Scott Peal]

In the documentation for the TreeView, it shows how to add a node to the tree via code with a local datasource; however, there is no example of how to add a node when using a remote SQL datasource. Can you help me out with these two questions:

1. Do we need to add a record manually to the treeview or will the treeview auto-detect the new record in the updated datasource?

2. I am not able to get RefreshNode(), to work correctly. I am able to get Refresh to work though. How can we get the parent node refreshed with the new child without doing a full refresh?

3.  Once we add the new node, how do we get the treeview to select that newly added node?

Here is my code so far, thanks again for all the awesome products!

    async Task AddRecord()

    {

        // This is the record in the database

        OrgUnit orgUnit = new OrgUnit

        {

            // OrgId is the ID and will be auto-set by the database

            ParentOrgId = selectedNode.OrgId,

            Name = "New unit " + this.index

        };

        OrgUnit saved = await dal.SaveOrgUnitAsync(orgUnit);

        // This is the data item stored in the TreeView component node

        var orgUnitPickerItem = new OrgUnitPickerItem

        {

            OrgId = saved.OrgId,

            ParentOrgId = saved.ParentOrgId,

            Name = saved.Name,

            HasChild = false,

            Expanded = false

        };

        // This is the data source used by the TreeView

        PickList.Add(orgUnitPickerItem);

        //List<OrgUnitPickerItem> TreeData = new List<OrgUnitPickerItem>();

        //TreeData.Add(orgUnitPickerItem); 

        //await this.tree.AddNodes(TreeData, this.selectedNodeId, null, false);

        //string NodeId = "tree_" + this.index.ToString();

        //await this.tree.BeginEdit(NodeId);

        this.index = this.index + 1;

        await this.tree.AddNodes(orgUnitPickerItem, selectedNode);

      

        //this.tree.Refresh();

        // this.selectedNode is type OrgUnitPickerItem and is the parent

        await this.tree.RefreshNode(this.selectedNode, orgUnitPickerItem);

    }

[Scott Peal]

Please ignore this request. I built a treeview control for myself so no need for the Syncfusion one.

[Kanagambigai Murugan]

Hi Scott, 

 

Thanks for contacting Syncfusion support. 

 

Query-1:  Do we need to add a record manually to the treeview or will the treeview auto-detect the new record in the updated datasource? 

 

Could you please let us know whether you want to update the treeview after updating the DB or you want to update the client side changes to the DB? Kindly let us know your exact requirement 

 

Query-2: I am not able to get RefreshNode(), to work correctly. I am able to get Refresh to work though. How can we get the parent node refreshed with the new child without doing a full refresh? 

 

If you are refreshing the parent and child nodes together in the flat datasource, please refer to the following format. 

 

  void Click() 

    { 

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

        TreeData.Add(new 

        { 

            Id = 6, 

            FolderName = "ParentItem", 

            HasSubFolders = true 

 

        }); 

        TreeData.Add(new 

        { 

            Id = 100, 

            ParentId = 6, 

            FolderName = "ChildItem1", 

        }); 

        TreeData.Add(new 

        { 

            Id = 101, 

            ParentId = 6, 

            FolderName = "ChildItem2", 

 

        }); 

        tree.RefreshNode("6", TreeData); 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp12036093064  

 

Query-3:  Once we add the new node, how do we get the treeview to select that newly added node? 

 

After adding the new node, you can select it by passing the id of the newly node to the SelectedNodes  API 

 

string[] selectNode = new string[] { "6" }; 

        this.tree.SelectedNodes = selectNode; 

 

Also please check out various features in our Blazor TreeView   

 

https://www.syncfusion.com/blazor-components/blazor-treeview 

 

 

Kindly check the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Kanagambigai M.