How do you refresh a particular node

Hi there
Once i have expanded the node and it has retrieved the node from the remote data source.
How do I refresh it? I have a context menu item with refresh but I cant figure out how to refresh the the data and get it to reload the data from the web api again?
Regards

11 Replies 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team October 13, 2020 03:21 PM UTC

Hi Reg,  
 
Greetings from Syncfusion support. 
 
Based on your shared details, we suspect that you are expecting to the load child nodes on expanding the parent nodes of TreeView component. NodeExpanding event will trigger in TreeView, when expanding the parent nodes. Using that event, you can fetch the data from your server side and update the value in TreeView datasource. 
 
Refer the below code snippet. 
 
<SfTreeView TValue="JobCategory" ShowCheckBox="true" @ref="tree" AutoCheck="false"> 
    <TreeViewEvents TValue="JobCategory" NodeExpanding="NodeExpanding"></TreeViewEvents> 
    <TreeViewFieldsSettings TValue="JobCategory" Id="Id" DataSource="@MyFolder" Text="Name" ParentID="ParentId" HasChildren="HasChild" Expanded="IsExpanded" IsChecked="IsChecked"></TreeViewFieldsSettings> 
    <TreeViewTemplates TValue="JobCategory"> 
        <NodeTemplate> 
            <div> 
                <div class="treeviewdiv"> 
                    <div class="nodetext"> 
                        <span class="treeName">@((context as JobCategory).Name)</span> 
                    </div> 
                </div> 
            </div> 
        </NodeTemplate> 
    </TreeViewTemplates> 
</SfTreeView> 
 
public void NodeExpanding(NodeExpandEventArgs args) 
    { 
        if (args.IsInteracted) 
        { 
            if (args.NodeData.Id == "1") 
            { 
          //Based on your requirement, you can fetch the data from server side. 
                MyFolder.Add(new JobCategory 
                { 
                    Id = "4", 
                    ParentId = args.NodeData.Id, 
                    Name = "Music", 
                    Count = 3 
                }); 
                MyFolder.Add(new JobCategory 
                { 
                    Id = "5", 
                    Name = "Pictures", 
                    ParentId = args.NodeData.Id, 
                    Count = 5 
                }); 
 
            } 
        } 
    } 
 
Refer the sample link below. 
 
 
If we misunderstood your query, could you please share the below details. 
 
1.     Share the code for TreeView component used in your application. 
2.     Share the screenshot or video footage of your requirement. 
3.     Explain the details for your requirement. 
 
Refer the below link to know more about the TreeView component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer

JA Jacky December 4, 2020 01:39 AM UTC

Hi Sowmiya ,

I have similar requirement as follows :
I use TreeView with ContextMenu to popup a Edit Dialog for modify tree FolderName when I confirm it and update to database ,
(as below picture)
What is The better way to sync the modified value to treeview Foldername ?

Best Regards,

Jacky


MK Muthukrishnan Kandasamy Syncfusion Team December 4, 2020 12:54 PM UTC

 
Hi Jacky, 
 
Thanks for the update. 
 
We have validated your requirement in Syncfusion Blazor TreeView component. We can update the tree node text dynamically by editing with in a dialog. Please refer to the below code block. 
 
[Index.razor] 
 
<div id="treeview"> 
    <SfTreeView TValue="EmployeeData" @ref="tree" @bind-SelectedNodes="@selectedNodes"> 
        <TreeViewFieldsSettings Id="Id" ParentID="Pid" DataSource="@ListData" Text="Name" HasChildren="HasChild"></TreeViewFieldsSettings> 
        <TreeViewEvents TValue="EmployeeData" NodeSelected="OnSelect" NodeClicked="nodeClicked"></TreeViewEvents> 
        <SfContextMenu TValue="MenuItem" @ref="menu" Target="#treeview" Items="@MenuItems"> 
            <MenuEvents TValue="MenuItem" ItemSelected="MenuSelect"></MenuEvents> 
        </SfContextMenu> 
    </SfTreeView> 
</div> 
 
<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 
    <DialogTemplates> 
        <Header> Dialog </Header> 
        <Content> <SfTextBox @ref="textRef"  Value="@NodeName" Placeholder='Node Text'></SfTextBox> </Content> 
    </DialogTemplates> 
    <DialogButtons> 
        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" /> 
        <DialogButton Content="Cancel" OnClick="@cancelDialog" /> 
    </DialogButtons> 
</SfDialog> 
 
@code 
{ 
    // Reference for treeview 
    SfTreeView<EmployeeData> tree; 
 
    // Reference for context menu 
    SfContextMenu<MenuItem> menu; 
 
    // Reference for text box 
    SfTextBox textRef; 
 
    string selectedId; 
    private bool IsVisible { get; set; } = false; 
    public string NodeName { get; set; } = ""; 
 
    int index = 100; 
    public string[] selectedNodes { get; set; } 
    // Datasource for menu items 
    public List<MenuItem> MenuItems = new List<MenuItem>{ 
        new MenuItem { Text = "Edit" }, 
        new MenuItem { Text = "Remove" }, 
        new MenuItem { Text = "Add" } 
    }; 
 
    // Triggers when TreeView Node is selected 
    public void OnSelect(NodeSelectEventArgs args) 
    { 
        this.selectedId = args.NodeData.Id; 
    } 
 
    // Triggers when TreeView node is clicked 
    public void nodeClicked(NodeClickEventArgs args) 
    { 
        selectedId = args.NodeData.Id; 
        // get selected node text 
        this.NodeName = args.NodeData.Text; 
        selectedNodes = new string[] { selectedId }; 
    } 
 
    // Triggers when context menu is selected 
    public void MenuSelect(MenuEventArgs<MenuItem> args) 
    { 
        string selectedText; 
        selectedText = args.Item.Text; 
        if (selectedText == "Edit") 
        { 
            // open edit dialog 
            this.IsVisible = true; 
        } 
        else if (selectedText == "Remove") 
        { 
            this.RemoveNodes(); 
        } 
        else if (selectedText == "Add") 
        { 
            this.AddNodes(); 
        } 
    } 
 
    // ok button function 
    private void CloseDialog() 
    { 
        // get modifed textbox value 
        this.NodeName = this.textRef.Value; 
        this.IsVisible = false; 
        // update to tree view data source 
        ListData.Where(x => x.Id == this.selectedId).ToList()[0].Name = this.NodeName; 
    } 
 
    // cancel button 
    private void cancelDialog() 
    { 
        this.IsVisible = false; 
    } 
 
 
We have attached sample application for your convenience, which can be downloaded from the below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 




JA Jacky December 7, 2020 05:06 AM UTC

Hi Muthukrishnan

Awesome!!

Thank you so much for your quick reply and provide the sample code which really helps me a lot.

I will give you further information after integrate and test

Have a very nice day !


Best regards,
Jacky


SP Sowmiya Padmanaban Syncfusion Team December 7, 2020 05:09 AM UTC

Hi Jacky,  
  
Thanks for the update. 
  
We will wait to hear from you. 
  
Regards,  
Sowmiya.P 
  



JA Jay May 12, 2021 11:34 AM UTC

Hi,

In a similar vain, how would I update a node's child elements if the call to the data is asynchronous? Only just started with Blazor so the attached file is just playing around.

Attachment: NavMenu_489a3b6f.zip


IL Indhumathy Loganathan Syncfusion Team May 13, 2021 04:40 PM UTC

Hi Jay, 
 
Currently, we are making a sample similar to your requirement to update TreeView child node with asynchronous call. We are facing some complexities and need some additonal time to validate this. We will update you further details on 19th May 2021. 
 
We appreciate your patience. 
 
Regards, 
Indhumathy L 



IL Indhumathy Loganathan Syncfusion Team May 19, 2021 04:04 PM UTC

Hi Jay, 
 
Thanks for your patience. 
 
We have prepared a sample to update the child nodes of TreeView by using an asynchronous data call. As mentioned earlier, we are facing an issue with data refreshing in latest package version and considered this as a bug from our end. We will include the fix for this issue in Volume 2 release, which is expected to be rolled out by the end of June 2021. 
 
You can track the status through the below portal link. 
 
 
However, we have achieved your requirement in 18.4.42 package version. You can find the sample demonstrating the solution from below link. 
 
 
Kindly check the sample and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 



JA Jay May 24, 2021 08:11 PM UTC

Hi Indhumathy,

Excellent on time reply, will look forward to the new release.

In the meantime I can work with the earlier version.

Great work, many thanks

Jay


KR Keerthana Rajendran Syncfusion Team May 25, 2021 05:54 AM UTC

Hi Jay, 
 
Most welcome. We are happy to hear that the provided suggestion helped you. Please track the provided feedback link to know the status of the issue.  
 
 
Regards, 
Keerthana.  



IL Indhumathy Loganathan Syncfusion Team May 28, 2021 02:13 PM UTC

Hi Jay, 
 
Sorry for the inconvenience. 
 
On further validation, we identified that the issue with updating child nodes dynamically occurs, because the data source is not updated properly at sample level.  
 
Refer to the below code snippet. 
 
private async Task GetPropertyList(string parentNodeId) 
{ 
    List<string> Nodes = new List<string>(); 
    treedata.Remove(treedata.FirstOrDefault(n => n.nodeId == "02-01")); 
    await Task.Run(() => LoadProperties(parentNodeId)).ContinueWith(t => 
    { 
        treedata.AddRange(t.Result); 
    }); 
} 
 
We have attached the modified sample with your use case scenario for updating the data source dynamically while expanding a tree node in the below link with our latest version. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Loader.
Up arrow icon