DataInspector | Data Inspection Toolbar for Android Development

In both the sample that you refer to, and in a typical usage such as in the sample Org Chart Editor, https://gojs.net/latest/samples/orgChartEditor.html, the DataInspector is showing properties of the selected node's data object in the model. Some of those properties are editable. When the user modifies the value and focus is lost, the inspector code commits a transaction to modify that data object's property value.

Because there is a Binding of some GraphObject property in the Node (or Link) template, modifying the data property by calling Model.set will update the corresponding GraphObject property, which will cause the diagram to update.

In your case you want a binding of GraphObject.fromMaxLinks from the "maxLinks" property on the node data object. This is shown in the Node template, below.

Note how the TextBlock.text binding works so that the user can either edit the text in-place or edit it in the Inspector.

The complete sample:

I didn't realize you had asked this so many times.

I seem to have missed this before. Here's some code that answers your question by implementing it:

OK, let's assume that the list of choices for the link labels is held in the Model.modelData object. I'll name the property "choices", but of course you can use whatever name you like. myDiagram.model.set(myDiagram.model.modelData, "choices", ["one", "two", "three"]);

Your Link template might look something like: myDiagram.linkTemplate = $(go.Link, $(go.Shape), $(go.Shape, { toArrow: "OpenTriangle" }), $(go.TextBlock, { background: "white", editable: true, textEditor: window.TextEditorSelectBox, // defined in extensions/textEditorSelectBox.js textEdited: function(tb, oldstr, newstr) { var choices = tb.diagram.model.modelData.choices; var idx = choices.indexOf(newstr); if (idx >= 0 && oldstr !== newstr) { console.log("removing choice " + idx + ": " + newstr); var newchoices = Array.prototype.slice.call(choices); newchoices.splice(idx, 1); tb.diagram.model.set(tb.diagram.model.modelData, "choices", newchoices); tb.editable = false; // don't allow choice again } } }, new go.Binding("text"), new go.Binding("choices").ofModel()) );

Note how the TextBlock.textEditor is defined to be a TextEditorSelectBox and the TextBlock.textEdited event handler is defined to set the modelData.choices property to be a new Array without the chosen string.

It also sets TextBlock.editable back to false so that the user cannot re-choose for that Link. That's one way to avoid problems with repeated edits; but you could implement your own policies. In retrospect I think the more likely policy would be to add the old value to and remove the new value from the modelData.choices Array.

Also, you'll want to implement a Model Changed listener that notices when Links have been removed from the model, so that you can add its choice back to the myDiagram.model.modelData.choices Array. In your Diagram initialization: $(go.Diagram, . . ., { "ModelChanged": function(e) { if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray") { var linkdata = e.oldValue; var oldstr = linkdata.text; if (!oldstr) return; var choices = e.model.modelData.choices; var idx = choices.indexOf(oldstr); if (idx < 0) { console.log("adding choice: " + oldstr); var newchoices = Array.prototype.slice.call(choices); newchoices.push(oldstr); e.model.set(e.model.modelData, "choices", newchoices); } } } })

Yes, that documentation page about user permissions, https://gojs.net/latest/intro/permissions.html, should give you an answer.

I'm guessing that you don't want to disable all deletions by setting Diagram.allowDelete to false, or to disable all in-place text editing by setting Diagram.allowTextEdit to false. Instead you probably want to prevent deleting or editing the original nodes and links but not any newly created nodes or links. Is that right?

If so, you can set or bind Part.deletable and Part.textEditable to false on all those original Nodes and Links. You can do that in an "InitialLayoutCompleted" DiagramEvent listener. For example in a Diagram initialization:

Nailed it in the end:

The trick is to put the line