How to refresh a tree node on context menu click event

Webix JS
#1

Hello Guys,

i want to clear a tree node and reload it again on context menu click .please check this snippet

https://webix.com/snippet/5cf4b651

#2

@webix team any update?

#3

Hello,
To delete a node (parent or child) you should use the remove method and specify the id of the required node there:

tree = webix.ui({ view:"tree",... });
 
var nodeId = tree.getSelectedId();
tree.remove(nodeId);

And you can use clearAll and parse to reload it

#4

@Nastja thank you for your reply but my requirement is to reload the specific node on context menu click event

#5

@qadirkanore can you please clarify, do you intend to reload the branch (child nodes) or just the specific node where the context option is clicked?

#6

loadBranch is intended for one-time branch loading, so in order to reload it again, you need to use a custom ajax request
https://webix.com/snippet/93f8596b

As for updating one item, if your backend is tuned for returning one record, you can make a custom request and updateItem with the new data:

webix.ajax().get("/data.php?updateId="+nodeId).then(function(data){
     var update = data.json();
     tree.updateItem(nodeId, update);
});
#7

@Listopad i want to reload the child of the node.Thanks a lot for the snippet it helped me to fix my issue

#8

Hi,
How do I refresh a node if I am using the ‘url’ property to let the Tree component handle Dynamic loading of each child, as per https://docs.webix.com/samples/17_datatree/16_dyn_loading/01_dyn_loading.html
I have tried using $$(“MyTree”).Refresh(TreeNode.id) but this does not do anything!
Thanks
Antony

#9

I am having an issue when reloading a branch, the backcolor of the nodes is not refreshed. I used the code in https://webix.com/snippet/93f8596b, it refreshes the texts shown in the nodes, but not the color, code is below, and my template is:

template: "{common.icon()} <img src='/img/#imageUrl#' style='float:left; margin:3px 4px 0px 1px;'> <font color='#itemColor#'> #bomLongName# </font>",

  //where itemcolor field determines the color of the node.

  webix.ajax().put("/search/ChangeStatusBOM/", { id: nodeId, bomId: nodeId, bomStatus: 'D', parent_id: node.parent_id },
                   {
    error: function (text, data, XmlHttpRequest) {
      console.log("Error deleting node");
    },
    success: function (text, data, XmlHttpRequest) {
      // custom ajax request instead of loadBranch
      var url = "/search/GetBOMTreeByDtlId/";
      var node = treeB.getItem(data.json().id);
      console.log(url + data.json().parent_id);
      treeB.parse(
        webix.ajax().get(url + data.json().parent_id).then(function (data) {
          return data = data.json();
          // typical loadBranch response
          // {"parent":"2","data":[{"id":5,"value":"List"}]}
        }) 
      );

    }
  });

Thanks!

PS: is this only valid if done in “save” property of the tree? I just realized that data is not updated if it is not called from save section. Is this a way to manually call the update that is performed when the ajax runs inside Save: section?
thanks.

#10

Any word on this?