Binding field choices properties

Hello,

Which are properties of the a new go.Binding("choices").makeTwoWay()) that can be changed using function:

model.setDataProperty(dataNodeArray, propertyName, contentProperty);

This property:

$(go.TextBlock, {
                    row: 1,
                    column: 1,
                    editable: true,
                    text: "Select ...",
                    textEditor: window.TextEditorSelectBox,
                    isMultiline: false,
                    font: "12pt Arial",
                    maxSize: new go.Size(180, NaN),
                    desiredSize: new go.Size(200, NaN),
                    stroke: "whitesmoke",
                    margin: 2,
                }, new go.Binding("choices").makeTwoWay()),

The property: text: “Select …” can be changed using setDataProperty ?

Bindings are used to update a target property of a GraphObject from a source property in some model data. You should probably read the intro page on data binding: GoJS Data Binding -- Northwoods Software.

Yes, you can set the text property using model.setDataProperty(nodedata, "text", "New text value");, and you should do so within a transaction.

Thank you answer.

I’ll try again.

Actually, what Jon said is true only if you have a Binding on the TextBlock.text property.

$(go.TextBlock, . . .,
    new go.Binding("text").makeTwoWay(),  // TwoWay only if editable: true
    new go.Binding("choices")  // this should not be TwoWay unless you have code setting TextBlock.choices
    )

Then you could do something like:

myDiagram.model.commit(function(m) {
    m.set(nodedata, "text", "Some new text string");
}, "changed text");

This wraps whatever model changes you want to make into a single transaction.

1 Like

Jhardy,

Didn’t work ! Can I have done something wrong ?

See my scenario:

I have a model saved in database, I did make a call ajax, building model json, and latter, I loading the model for function go.Model.fromJson(json);

After that, I have the method JS:

// Wait the diagram loading 
setTimeout(function () {
                            UpdateTextChoicesLatterLoadingModeloJson();
                        }, 2000);

After that, my function read all nodeDataArray loaded, getting first position of choice property:

UpdateTextChoicesAposCarregarModeloJson: function () {
        
        var nodeDataArray = myDiagram.model.nodeDataArray;

        for (var i = 0; i < nodeDataArray.length; i++) {

            var node = OJC.Target.FindNodeDataByKey(nodeDataArray[i].key);

            OJC.Target.CommitChanges(myDiagram.model, "Change text", node, "text", node.choices[0]);
        }

    },

I need that the first value of choice property, is defined in property: text, of node. So that the user see which previously chosen value.

(we cross-posted; please see my response above)

Ok, thank you.

I did do this:

UpdateTextChoicesAposCarregarModeloJson: function () {
    
    var nodeDataArray = myDiagram.model.nodeDataArray;

    for (var i = 0; i < nodeDataArray.length; i++) {

        var node = OJC.Target.FindNodeDataByKey(nodeDataArray[i].key);
        
        myDiagram.model.commit(function (m) {
            m.set(node, "text", node.choices[0]);
        }, "Text can be changed.");

    }

},

I need that is defined this value of yellow, in text property of new go.Binding("choices").makeTwoWay()):

But still didn’t work. See:

image

So, just to confirm, it is the case that you want to make sure that all of your nodes have an initial text value that is the first of that node’s choices? If so…

First, just as with any database programming you might do, you should not have transactions performed in a loop.

Second, I don’t know what your FindNodeDataByKey does, but it seems to me that you already have the node data object – it is the item in the Model.nodeDataArray that you are iterating over.

Third, and maybe this is not a problem with the data that you have, but your code is assuming that nodedata.choices is an Array of strings and the Array.length > 0.

    myDiagram.model.commit(function (m) {
        var nodeDataArray = m.nodeDataArray;
        for (var i = 0; i < nodeDataArray.length; i++) {
            var data = nodeDataArray[i];
            var first = (data.choices && data.choices.length > 0) ? data.choices[0] : "default text";
            m.set(data, "text", first);
        }
    }, "all text were changed");

So, just to confirm, it is the case that you want to make sure that all of your nodes have an initial text value that is the first of that node’s choices? If so…

**- Yes ! And my field is of type: choice. **

Second, I don’t know what your FindNodeDataByKey does, but it seems to me that you already have the node data object – it is the item in the Model.nodeDataArray that you are iterating over.

  • That’s right, I already have it. I used FindNodeDataByKey only to fetch the same node from LinkDataArray, to see if it would be possible to change the value…

Third, and maybe this is not a problem with the data that you have, but your code is assuming that nodedata.choices is an Array of strings and the Array.length > 0.

- Yes, is a string array.

But, this solution above still don’t showing the text value. My method:

UpdateTextChoicesAposCarregarModeloJson: function () {

    myDiagram.model.commit(function (m) {

        var nodeDataArray = m.nodeDataArray;

        for (var i = 0; i < nodeDataArray.length; i++) {

            var data = nodeDataArray[i];

            var first = (data.choices && data.choices.length > 0) ? data.choices[0] : "default text";

            m.set(data, "text", first);
        }
    }, "all text were changed");
},

And after that load, the field don’t is changed:

image

I need the value of the choice [0], to be in place of the “Select …”. It already brings value to the selection field, but I want it to already come as “selected.”

But does your node template have the Binding that I said it had to have?

No ! The my node is new go.Binding("choices").makeTwoWay()),.

My field is it:

$(go.TextBlock, {
                row: 1,
                column: 1,
                editable: true,
                text: "Select ...",
                textEditor: window.TextEditorSelectBox,
                isMultiline: false,
                font: "12pt Arial",
                maxSize: new go.Size(180, NaN),
                desiredSize: new go.Size(200, NaN),
                stroke: "whitesmoke",
                margin: 2,
            }, new go.Binding("choices").makeTwoWay()),

I want change the value of text property this node.

You must add the binding Walter suggests. You cannot set the text property if it isn’t bound to your data.

$(go.TextBlock,
  { ... },
  new go.Binding("text").makeTwoWay()
  new go.Binding("choices")
)

Sorry friend, now that I have seen, that in this suggestion you have put two go.Biding (). It worked here now! Thanks a lot for the help !