data in editEdge

[Chroedde]

Hello,
please, could you help me with a little thing? I have the following in the manipulation options:

`editEdge: function (data, callback) {
    document.getElementById('operationEdge').innerHTML = "Edit Edge";
    document.getElementById('edge-id').value = data.id;
    document.getElementById('edge-label').value = data.label;
    document.getElementById('edge-title').value = data.title;
    document.getElementById('saveEdge').onclick = saveEdgeData.bind(this, data, callback);
    document.getElementById('cancelEdge').onclick = cancelEdgeEdit.bind(this, callback);
    document.getElementById('edgePopup').style.display = 'block';
}`

My problem is that I want the user also be able to edit the edge label and title. Unfortunately, unlike at editNode, data only consists of id, from and to. No label, no title. Is there a way to get the full edges data at this place?

Thanks a lot in advance.

Best regards!

[Tooa]

Hi,

you can use the selectEdge event that provides you with the id of the selected edge. Then just update the edge in the underlying edge dataset.

I strongly recommend you to read the documentation. Furthermore, please use stackoverflow for questions in future. Moreover, close your issues when the answer solves your problem e.g. here.

Best Uli

[Chroedde]

ok, mach ich. :-) Leider funktioniert es mit der selectEdge-Funktion auch nicht. Hier sagt er mir - warum auch immere - "getSelectedEdges is not defined".

[Tooa]

Can you provide a JSFiddle of the problem you are facing with selectEdge? It would be also helpful having a JSFiddle for your original problem with the manipulation system.

I had a look into the code and it seems that the editEdge provides edge data, which looks like:

let defaultData = {id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId};

@mojoaxel Should we create a new issue for an enhancement tackling the problem of adding the edge label to the defaultData parameter? You can alternatively change the label. Looks like it's really just adding the field to the object. However, I'm not sure if the editEdge is designed to allow changing the label. For me, it seems more like a feature for changing the connection. What do you think?

Best Uli

[Chroedde]

Hi Tooa,

First, thanks for the answer. Yes, it seems that title and label are misssing in this defaultData variable. Would be great if you would add it in a future version.

But for now I seem to be too stupid. Sorry for that. ;-) I give you the parts of my code.

1. New dataset (data comes from a database):

`nodes = new vis.DataSet(data[0].nodes);
edges = new vis.DataSet(data[1].edges);

var data = {
    nodes: nodes,
    edges: edges
};`

2. Options -> Manipulation:

`editEdge: function (data, callback) {
    document.getElementById('operationEdge').innerHTML = "Edit Edge";
    document.getElementById('edge-id').value = data.id;
    document.getElementById('edge-label').value = data.label;
    document.getElementById('edge-title').value = data.title;
    document.getElementById('saveEdge').onclick = saveEdgeData.bind(this, data, callback);
    document.getElementById('cancelEdge').onclick = cancelEdgeEdit.bind(this, callback);    
    document.getElementById('edgePopup').style.display = 'block';
},`

Here, data.id is being displayed correctly while data.label and data.title are undefined. I virtually tried everything that came to my mind but I am simply not able to get these two values.

Sorry if you think that you already gave me the answer but everything I tried with it failed. :-(

[Chroedde]

BTW, the same is with deleteNode and deleteEdge when you want to make a dialog with the question if one is sure to delete or cancel. -> data.id is accessible, data.title and data.label not. Maybe you could add these to data also to the regarding defaultData variables?

Thank you!! And excuse my maybe stupid questions.

[Tooa]

If you have the id you can always lookup the node or edge in the dataset.

[sawatsky]

I most definitely think that this should be a Feature-Request. We can currently get the label information about Nodes in editNode; it makes sense that we should get the label information about Edges in editEdge.

The editEdge event would also need to be fired not just when the edge's links are changed. Sometimes, a user might just want to edit the edges label and shouldn't have to arbitrarily drag the edge's links just to edit the label.

[mojoaxel]

@sawatsky Good point! Could you please create a new issue for that. I think this one is already a little too confusing for a clean feature-request 😉
Thanks!

[eymiha]

It's a simple change. At the beginning of _performEditEdge, include

label: ""+this.body.data.edges._data[this.edgeBeingEditedId].label

in the defaultData. It'll be delivered to the user-supplied editEdge function. I'll make the pull request if folks want me to.