How to refresh a tree node on context menu click event

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

Tagged:

Comments

  • @webix team any update?

  • edited January 2018

    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

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

  • @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?

  • 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);
    });
    
  • @Listopad i want to reload the child of the node.Thanks a lot for the snippet it helped me to fix my issue

  • 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

  • edited November 2019

    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.

  • Any word on this?

Sign In or Register to comment.