way to edit nodes

[joaofsa2000]

so as there isnt any direct method to edit a node i've had to make a few additions to make it work. first i created a simple form with inputs and one of the inputs i save the id of the node that i´ve chosen

  createNode: function(node,data) {


        const nodeData = data;  
  
        node.on('click', function(e) {

            if ($(e.target).closest('.content').length) { // this is because i have other elements inside the node that i dont want to be clickable, only the content
                    generateNodeInputs(nodeData,true); //this function basically generates the input fields for each property of the node and also a input that saves the node id

                    let canvasNode = bootstrap.Offcanvas.getOrCreateInstance($('#saveNode')[0])
                    $('#saveNode .offcanvas-title').text(nodeData.name)
                    canvasNode.show();


                console.log('Editing node:', nodeData.name);
            }
        });



    }

then i have a submit event function to change the data when submiting my form

$('#edit_org_node').on('submit',function (e) {

    e.preventDefault();

    e.stopPropagation();

    var data = getParamsAsObject($(this).serialize()); // this is a functions that turns the serialzed form into a object

    let jsonHierarchy = orgChart.getHierarchy(true);
    var digger = new JSONDigger(jsonHierarchy, orgChart.$chart.data('options').nodeId, 'children') // using JSONDIgger which is used by this package as well 
    var foundNode = digger.findNodeById(data.id);
    foundNode.name= data.name;
    foundNode.title=  data.title;        
    orgChart.init({ 'data': jsonHierarchy }) //refresh the datasource with the updated one

    let canvasNode = bootstrap.Offcanvas.getOrCreateInstance($('#saveNode')[0])
    canvasNode.hide();

})

hope this helps you start with it and you can add your own things