How to update Node metadata in version 3?

[Sasco]

I am relatively new to jsTree and am in the process of converting an application from the old 1.0 jsTree to the new 3.0 version (primarily to improve performance).

The nodes in our tree have additional data (beyond Id and Text) that is stored in each node's metadata properties.  We want the user to be able to view, edit, and save the metadata for a selected node.

We have the code working that displays a dialog box that shows the metadata for the selected node in editable text boxes.  But when they click Save, how do we update the selected node with the new metadata values?

There does not appear to be an update_node or save_node function (just the rename option).  How do you update a node's other info on the fly from jquery?

Thanks,

Sasco

[Ivan Bozhanov]

If you are using JSON - store your metadata in the "data "property of each node object.
Then after your user click save manipulate this "data" property using:
var node = $('#your-tree').jstree(true).get_node('the_node_id_being_edited');
node.data.some_key = "some_value";
...

Best regards,
Ivan

[Sasco]

Thanks for the quick response!

I think I am missing something about how the nodes are created in 3.0.  Our tree data is derived from collections of data entity classes (SkillTreeItems) which we convert to json using the JsonConvert.SerializeObject library.  So the start of the initial tree build looks something like this:

skillTree = $("#skillTree").jstree({

        "core": {

            "html_titles": true,

            "check_callback" : true,

            "data": @Html.Raw(JsonConvert.SerializeObject(Model.SkillTreeItems))

When I set a debugger break point in the event handler for the select_node event and look at the properties of the selected node, the data property is null, but there is an 'original' property that that has a 'metadata' sub-property and the metadata sub-property has all of the expected custom properties associated with the SkillTreeItems above.  If I try modifying these metadata properties, I don't get an error, but the changes don't appear to be saved to the tree.  What is the 'original' property of a node?  Is there something we are doing that is causing custom data to show up under node.original.metadata instead of node.data?

Thanks!

[Ivan Bozhanov]

As I said - use the "data" property, not "metadata" (simply convert your metadata to "data" property and not "metadata"). "original" is an internal property - do not modify it.
Oh, and "html_titles" does not exist in v.3

Best regards,
Ivan

[Sasco]

Thanks!  Got it all working now.

[Luis Diaz]

Hi! sorry for getting into this again, but I don't get how to update the data. What I'm trying to do it's to get a text writed by the user and then add it to the "data" property of a selected jtree node.

Right now, I'm testing with just one node, but in the future there will be thousands of nodes.

My json looks like this:

[{"id":"CENTRO_PARA_NOMBRE","text":"CENTRO_PARA_NOMBRE","icon":"jstree-folder","li_attr":{"id":"CENTRO_PARA_NOMBRE"},"a_attr":{"href":"#","id":"CENTRO_PARA_NOMBRE_anchor"},"state":{"loaded":true,"opened":true,"selected":true,"disabled":false},"data":{},"parent":"#"}]

And I want to use a button to add the data. That button, right now, calls this function, where I'm trying to add a string to data:

    function appendData(){

        var node = $('#levels').jstree(true).get_selected();

        console.log("node selected:" + node);

        var data2push = "This is a test string";
        // TODO: add code to append the whatever to the data

    }

How can I append the data2push to 'data' of the node?

thanks!

[Luis Diaz]

Just found it.

function appendData(){

        var node = $('#levels').jstree(true).get_selected();

        console.log("node selected:" + node);

        var data2push = "This is a test string";

        // TODO: add code to append the whatever to the data

        $('#levels').jstree(true).get_node(node).data.data2push= data2push;

    }