Tree locating

Hi webix team,

Here is the snippet -
https://webix.com/snippet/57f35481

I have mention the requirement in snippet.

Thanks in advance

Hi,

Can you please clarify, “refreshing the tree” means complete tree reloading or just a refresh method? The last one does not close opened nodes.

Refreshing means reloading the tree. Means after reloading the tree i will be having only root nodes

Before reloading, all currently opened items can be obtained as the array of IDs via tree.getState().open.

Nodes can be opened only if they children exist on client-side, so the most simple solution is to return all data from the server on this particular request. It will definitely fit if the nodes should be opened on different levels of the tree.

Other solutions are not so nice because the implementations are quite complex

  • gather IDs of opened nodes, pass them as request parameters and return the needed structure from the server (not only 1st level) and open them after reloading;
  • gather IDs of opened nodes, iterate through items available after reloading and open them with loadBranch, if needed.

Here’s a draft of 2nd option for one level of data: https://webix.com/snippet/3668c15d

Technically, it is possible to apply recursion to this algorithm and go further, but it rather makes sense to load the needed piece of data at once than apply a complex sequence of requests, so please consider the very first suggestion.

Hi listopad,

If I am editing the perticular node suppose node level 3. In that case How I will update only that level 3 node value from server.
Now I am Refreshing whole tree to get updated value of tree node. But it closing other node and its very difficult to locate all node.
Please give me solution for perticular node update. All data is coming from server.
It sholud be for dyanamic ids.

Thanks,
Mira

Hello,

There can be several solutions for this use case.

(1) If the whole tree is reloaded, you can locate the prevously selected node in the following way:

  • memorize it;
  • load the data;
  • call .select() method to apply selection and .showItem() to scroll to it (if needed);
  • run a loop to open all the parents of its items.

Check the following snippet, please: https://snippet.webix.com/boc09tua

(2) But you are editing a tree node value in the form, it means that the data (as well as the changed data) is already available on the client side.
So you can send the changed data to server and then just update the related node on the client-size with tree.updateItem() method.

Check the snippet, please: https://snippet.webix.com/i70ugpig

HI Helga,
Thanks for reply:)

In this snippet-
https://snippet.webix.com/i70ugpig
Suppose I dont want to take all parameters of tree to form. Or maybe I dont want $$(“form”).setValues(item)… Then How I will do this?

You can send form data to server and update tree item on client with the necessary fields. After you save the form, just make sure that your server returns all the necessary data you need to add to this or that tree item:

webix.ajax("save_form", {values}).then(function(data){             
      /* data - form data returned by server, 
          should contain item id and other tree item properties*/
      $$("tree").updateItem(data.id, data);
});

https://snippet.webix.com/myrd8zfw

Hi webix team,

https://snippet.webix.com/sjzvliqi
In this snippet , onItemClick child data is not coming.
If child data is coming how to edit and update child node dynamically?

Here is the updated snippet ( in the previous one data loading url was a fake )
https://snippet.webix.com/hcn1sz6m

If you expect some other behavior, please clarify your requirements

@maksim

Thanks for your reply.
But in my tree there are so many things like link, nodetype,id,uid and all.
So while editing I am opening the popup and in that popup I need only nodename and id. So I am not able to hold the whole tree node object while editing.
For that I am using onDataRequest event after editing the node.
In that I am getting updated node object so I don’t need to use updateItem method.
But the thing is that even I am using onDataRequest method I am getting all node but ine extra node(which I am updating).
e.g. I am having two node in one parent(test_1,test_2),If I am editing test_1 to test_3. Then my after onDataRequest I am getting only 2 nodes but on UI it showing 3 nodes(test_3,test_2,test_3).
I am not able to make the snippet bacause data is coming from server with edited value.
Can you tell me why this is happening?
I am removing the extra item but Its not a better solution.

Hi webix team,
Have you got my question?

Hi Webix team,

Please reply me I am stuck on this question from almost last 1 and half month.

Hi,

If I understood correctly, you are reloading the data of the branch from server side, and while new data doesn’t contain some items they are still present on client side, correct?

By default, component only updates and inserts items when info for existing branch is retrieved from the server side. If you want to remove items you can set to true the removeMissed property

https://docs.webix.com/api__link__ui.proto_removemissed_config.html

webix.ui({
  view:"tree", removeMissed:true, ...
})