Update TextBlock color


I am trying to update to color of a textblock.
The textbock is attached to a node like this

diagram.nodeTemplate = $(go.Node, "Table", { locationObjectName: "BODY", toolTip: toolTipTemplate,

$(go.TextBlock, {
editable: true
new go.Binding(“stroke”, “fontcolor”, function (d) {
if (d.R != null) {
return ‘rgba(’ + d.R + ‘,’ + d.G + ‘,’ + d.B + ‘,’ + d.A + ‘)’;
else {
return d;

and this is waht I do to update the textblock color

diagram.model.setDataProperty(itemData, "fontcolor", 'orange');

I hope you can suggest a solution

Best regards!

In your binding, you should probably be checking if d.R is undefined rather than null.

new go.Binding("stroke", "fontcolor", function (d) {
  if (d.R !== undefined) {
    return `rgba(${d.R}, ${d.G}, ${d.B}, ${d.A})`;
  } else {
    return d;

Also, you should wrap your call to setDataProperty in a transaction.


I adapted your suggetions into my code but it is still not working.

I was trying to figure out what my problem is, as I noticed some very strange behaviour.

Here is my code:

new go.Binding("stroke", "fontcolor", function (d) { if (d.R !== undefined) { returnrgba(${d.R}, ${d.G}, ${d.B}, ${d.A}); } else { console.log(d); var x = fakeVar.fakeMethod(seconFakeVar); console.log(x); return 'blue'; } })

As you can see I added a syntax error, but this error seems to never be reached, for some reason.
I have the same problem in this line:
new go.Binding("textAlign", "", function (d) { return "left"; }),
Here it looks like “left” is never returned.

I hope you can help me out here, right now its feel like I am stuck for good.

Best regards!

To what data is the node bound?


I am not sure what you mean by that, to be honest but
here is what I add as my nodeData

diagram.model.addNodeData({ type: type, itsLabel: true, labelParentRecId: itemData.RecId , fill: fillColor, strokeColor: strokeColor, strokeWidth: lineWidth, fontcolor: TextTemplateDic[textTemplateRecId].FontColor, fontart: TextTemplateDic[textTemplateRecId].FontArt, fontsize: TextTemplateDic[textTemplateRecId].FontSize, textAlign: TextTemplateDic[textTemplateRecId].TextAlign, width: width, height: height, key: recId, name: name, latlong: [latlngLabel[0], latlngLabel[1]], pixelLocation: latlngLabel[0] + " " + latlngLabel[1], TextRecId: textTemplateRecId, ObjectState: 0, IsVisible: true, textfield: textField, });

OK, so in this case what’s the value of TextTemplateDic[textTemplateRecId].FontColor?

Ok at first the value of TextTemplateDic[textTemplateRecId].FontColor is an Object like this {"A": 1, "R": 123, "G": 23, "B":41} but after this the value is a string like rgba(123, 23, 41, 1) .
So only during the first initialization the value is an object, later on it is always a string.

And when you set data.fontcolor to a string, are you calling Model.setDataProperty?

Regarding your other implicit question, it’s the case that all Binding evaluations intentionally ignore any errors that happen. So if there’s an error, there’s no updated target property, but everything else continues as normal.

Ok it is nice to know that it is regular behaviour that errors are ignored.

This is what I call to update the fontcolor
diagram.model.setDataProperty(itemData, "fontcolor", 'rgba(' + TextTemplateDic[items[i].TextTemplateId].FontColor.R + ', ' + TextTemplateDic[items[i].TextTemplateId].FontColor.G + ', ' + TextTemplateDic[items[i].TextTemplateId].FontColor.B + ', ' + TextTemplateDic[items[i].TextTemplateId].FontColor.A + ')');

I don’t know what TextTemplateDic and TextTemplateId are, but otherwise I just tried your scenario, and it worked as I think you would want.

My node template had this:

    $(go.TextBlock, . . .,
        new go.Binding("stroke", "fontcolor", function(d) {
            if (d.R !== undefined) {
              return "rgba(" + d.R + "," + d.G + "," + d.B + "," + d.A + ")";
            } else {
              return d;

And the initial node data was:

{ key: 4, text: "Delta", color: "white", fontcolor: { A: 1, R: 123, G: 23, B: 41 } }

Then in an HTML button’s click function:

  function changeColor() {
    var data = myDiagram.model.findNodeDataForKey(4);
    myDiagram.model.setDataProperty(data, "fontcolor", "green");
    myDiagram.commitTransaction("changed color");

And sure enough, the initially dark red text changed color to green.

It works!

Using a transaction in that case seems to do the job!
Thank you for your help.