We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding a node to a treeview when using an SQL datasource

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

2 Replies

SP Scott Peal December 29, 2019 03:55 PM UTC

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


KM Kanagambigai Murugan Syncfusion Team December 30, 2019 01:05 PM UTC

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); 
    } 
 
 
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   
 
 
 
Kindly check the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Kanagambigai M. 


Loader.
Live Chat Icon For mobile
Up arrow icon