Set first value in choices GO js

Hello guys,

I need set first value of my choice field , see below:

image

My diagram is: Flowchart, and when I make load this diagram, he don’t set value.

I’m using custom field, I tried many things but don’t work. Can you help me, please ?

Have you seen the drop-down list, whose contents are determined by the value of TextBlock.choices, shown in Text Editing Examples ?

1 Like

Thank you !

I have not seen it …

I tried here, but don’t work … My code:

myDiagram =
$(go.Diagram, “myDiagramDiv”, // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
“textEditingTool.defaultTextEditor”: window.TextEditorSelectBox,
allowDrop: true, // must be true to accept drops from the Palette
“LinkDrawn”: ShowLinkLabel, // this DiagramEvent listener is defined below
“LinkRelinked”: ShowLinkLabel,
“TextEdited”: TextoEditadoGetEvent,
scrollsPageOnFocus: false,
“undoManager.isEnabled”: true, // enable undo & redo
allowHorizontalScroll: true,
allowVerticalScroll: false
});

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

Has thing wrong ?

You probably don’t want the TextBlock.choices Binding to be TwoWay – nothing should be modifying that Array.

You say that it doesn’t work, but you don’t say and show how and why.

I added this line:

myDiagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditorSelectBox;

And removed the: new go.Binding(“choices”).makeTwoWay();

And stayed like this:

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

But it’s still showing:

image

And value it’s here:

image

You still haven’t made clear what you want.

Did you want some text to be showing as the value for the “Desc:” field or property? If so, make sure that TextBlock has a Binding so that it can get the value from your data object. If for some reason the data object doesn’t have that data property, you can assign a string to the TextBlock.text property, which will be shown as the default value until the Binding produces a value.

Please read Get Started with GoJS for an example of this.

Did you want some text to be showing the value for the “Desc:” field or property? If so, make sure that TextBlock has a Binding so that it can get the value from your data object.

Yes

I explained it wrong.

I have the field that will receive the value of the choice when it is selected.

But what I want is that when loading the diagram, be inserted in the field corresponding to “Desc:”, the value of the choice, which in this case will be only a value.

I’m going to have to change to that by loading my model myDiagram.model = go.Model.fromJson (data); it needs to populate the fields with their respective values in the text property.

I’m sorry, but I still do not understand what you want. Here’s my quick test of the TextEditorSelectBox functionality:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go-debug.js"></script>
<script src="../extensions/TextEditorSelectBox.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center  // for v1.*
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          {
            margin: 8,
            editable: true,
            textEditor: window.TextEditorSelectBox
          },
          new go.Binding("text").makeTwoWay(),
          new go.Binding("choices"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", choices: ["one", "two", "three"] },
      { key: 2, text: "Beta", color: "orange", choices: ["first", "second"] },
      { key: 3, text: "Gamma", color: "lightgreen", },
      { key: 4, text: "Delta", color: "pink", choices: ["Alpha", "Beta", "Gamma", "Delta"] }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>

In your case, you are loading the same value as the choice, in the text attribute. Right ?

In my case, I already have a template saved in the database, which the user has previously selected, now I need to bring that value from the database, and load it from the moment I pass a json string to the load diagram.

Right after the diagram loads my saved template, I need it to be placed in the attribute: text, the value coming from within the choices array.

Got it better?


diagram.nodeTemplate =
$ (go.Node, “Auto”,
$ (go.Shape, “RoundedRectangle”, {fill: “whitesmoke”})
$ (go.TextBlock, {margin: 5},
new go.Binding (“text”, “someValue”)) // bind to the “someValue” data property
);

var nodeDataArray = [
{key: “Alpha”, someValue: 1}
];
diagram.model = new go.GraphLinksModel (nodeDataArray);
diagram.model.undoManager.isEnabled = true;

// define function named “incrementData” callable by onclick
incrementData = function () {
var model = diagram.model;
// all model changes should happen in a transaction
model.startTransaction (“increment”);
var data = model.nodeDataArray [0]; // get the first node data
model.setDataProperty (data, “someValue”, data.someValue + 1);
model.commitTransaction (“increment”);
};

In this case above, I have a text field, and its value is hard-code. Right ?

Now I have a node called choices, but I need to update only the value of the text property of that choice, do I do using setDataPropery too? Or have another function.

Yes, the point of the TextEditingTool is to allow the user to modify the TextBlock.text property of a TextBlock. Normally the tool uses a simple textarea, but the extensions/TextEditorSelectBox.js provides a different text editor that uses a drop-down list.

Did you want the new value of that TextBlock.text property to be some string computed from the chosen drop-down list value? You can implement that by changing the HTMLInfo.valueFunction of the window.TextEditorSelectBox.

Or is there something else that you want?

Has some example, please ?

image

It’s possible to change value in the property text, of the a choices using the block below ?

    model.startTransaction(textTransaction);

    model.setDataProperty(dataNodeArray, "text", "Description of the first position choice");

    model.commitTransaction(textTransaction);

You need a custom TextEditorSelectBox. I suggest that you copy the file and modify it to suit your needs.

I already created

My properties:

// define the Node templates for regular nodes
        myDiagram.nodeTemplateMap.add("detailed", // the default category
            $(go.Node, "Auto", OJC.Target.Ext.NodeStyle(),

                $(go.Shape, "RoundedRectangle", {
                    //fill: "#00a7b0"
                    fill: "#0a4f75"
                }),
                $(go.Panel, "Table",
                    { defaultAlignment: go.Spot.Center },
                    $(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "italic normal 400 14px /1.2 sans-serif", stroke: "whitesmoke", margin: 10 }, new go.Binding("text", "key")),
                    $(go.TextBlock, {
                        row: 1,
                        column: 0,
                        font: "11pt monospace",
                        desiredSize: new go.Size(60, NaN),
                        stroke: "#fff", margin: 2
                    }, "Desc:"),
                    
                    $(go.TextBlock, {
                        row: 1,
                        column: 1,
                        editable: true,
                        text: "NEW_VALUE"
                        textEditor: window.TextEditorSelectBox,
                        isMultiline: false,
                        font: "12pt serif",
                        maxSize: new go.Size(180, NaN),
                        desiredSize: new go.Size(200, NaN),
                        stroke: "whitesmoke",
                        margin: 2,
                    }, new go.Binding("choices")),

                    $(go.TextBlock, {
                        row: 2,
                        column: 0,
                        font: "12pt monospace",
                        stroke: "whitesmoke",
                        desiredSize: new go.Size(60, NaN),
                        margin: 2
                    }, "R$: "),

                    $(go.TextBlock, {
                        row: 2,
                        column: 1,
                        desiredSize: new go.Size(200, NaN),
                        editable: true,
                        isMultiline: false,
                        font: "12pt monospace",
                        stroke: "whitesmoke",
                        margin: 2,
                        textEditor: window.InputValueAmount,
                    }, new go.Binding("text", "valueAmount").makeTwoWay())
                ),
                // four named ports, one on each side:
                OJC.Target.Ext.MakePort("T", go.Spot.Top, go.Spot.TopSide, false, true, $),
                OJC.Target.Ext.MakePort("L", go.Spot.Left, go.Spot.LeftSide, true, true, $),
                OJC.Target.Ext.MakePort("R", go.Spot.Right, go.Spot.RightSide, true, true, $),
                OJC.Target.Ext.MakePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false, $)
            ));

The choices field it’s working very good …

is possible to change the value of the property text, using commit ? Or there other way of doing ?

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

I ask this, because my diagram has already been loaded once, and its default values are already there …

but now, I have new values to load, and I need to set these values in their respective fields

If you have a new model to load, just load it.

If you have new property values for a particular node data object, just set them using Model.setDataProperty.

I tried it’s:

data.text receive value of the choice;

I make the commit after, passing the array of data. But the diagram loading out value empty:

image

What can I do wrong ?

I still don’t understand what you want.

But I do know that transactions are relatively expensive, so you should not execute them within a loop.

Ok Walter, thank for you help.

Walter,

I guess that to find the problem. I’m using just a $(go.TextBlock, {}new go.Binding("choice")), for all my shapes.

When I need to change the value specified field, I need set name property in function commit, right ?

So I can not change specific values for each node in the diagram. Right ?

Yes, of course you can change any particular property of any node data object in the model. Just call Model.setDataProperty to support undo/redo.

You really need a TwoWay Binding on the TextBlock.text property if you expect to save any new value in the model. And to be able to restore the TextBlock when you load the model.