Complex Objects with custom TextEditingTool

GoJS
1

Hi,
I’m trying to use a custom TextEditingTool of a typeahead/autocomplete nature.
Thing is, when an item is chosen, I need to do more than simply set the text - I also need to set the complex object to my model.
Since i also require the entire node data that has changed, I figured I could have the text edit getValue() would return the complex object, the converter on the two way bind would then use parts of it, and also set the text to the text box.
When I do that however, the converter gets called again…
What i’m looking for is some advise or example on how to work with a complex objects and the text editing tool

2

I’m not sure exactly what “complex object” editing that you need to do, but I’ll answer assuming you need to modify multiple properties on the bound data object in the model.

Here is a minimalist example of what you could do:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "lightgray", strokeWidth: 0 }),
        $(go.TextBlock, { margin: 8, editable: true },
          new go.Binding("text", "", fetch).makeTwoWay(store))
      );

    function fetch(data) {
      return data.key + ": " + data.extra;
    }

    function store(string, data) {
      var arr = string.split(":");
      // do not modify data.key!
      if (arr.length > 0) {  // if there is a colon,
        // only save data.extra:
        data.extra = arr[1].trim();
      }
    }

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha", extra: "first" },
      { key: "Beta", extra: "second" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);

This special kind of converter, which applies when the source property is the empty string, is described in Binding | GoJS API.