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



  • @webix team any update?

  • edited January 2018

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

    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

    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:

         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
    I have tried using $$("MyTree").Refresh( but this does not do anything!

  • 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, 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);
            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"}]}


    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?

  • Any word on this?

Sign In or Register to comment.