Tree Mapping : : highlight attributes based on the nodeDataArray condition

GoJS
1

Need to highlight the node based on the condition of nodeDataArray properties.

if prop is true then highlight the node

How to do that…?

the below code is not working .

```
 this.$(go.TextBlock,
            new go.Binding('text', 'data', function(s) {
if(s.madatory) {
              new go.Binding('background', 'isHighlighted');
}
              return s;
            }))
2

What does your node data look like?

I imagine you want a simpler binding, like

$(go.TextBlock,
  ...
  new go.Binding("background", "mandatory", function(m) {
    return m ? "red" : null;
  }
)
3

NodeDataArray has like this. if isMandatory is true then hightlight the field

'key' : attributes[i].beAttrName + i,
        'data' : attributes[i].beAttrName,
        'parent'  : outputBeType,
        'isMandatory' : attributes[i].isMandatory,
        'dataType' : attributes[i].dataType.type,
        'isUserdefied' : 0

Already have this function… How to add this code ?

this.$(go.Panel, 'Horizontal',
          { position: new go.Point(25, 0) },
          new go.Binding('background', 'isSelected', function(s) { return (s ? 'lightblue' : '#FFFFFF'); }).ofObject(),
          // tslint:disable-next-line:max-line-length
          // new go.Binding('background', 'isHighlighted', function(s) {  console.log('shenoz', s); return (s ? 'lightblue' : 'lightblue'); }).ofObject(),
          this.$(go.TextBlock,
            new go.Binding('text', 'data', function(s) { return s; }))
        )  // end Horizontal Panel
4

That source property is Part.isHighlighted, not some property on the node data object.

So you need to make sure the Binding is Binding.ofObject, just as the examples do.

5

Any sample code for this ?

6

GoJS Highlighting -- Northwoods Software has some examples.

7

Hi,…

Need to highlight some nodes based on key how to do?

8

Did you read the intro page that Simon linked? Find the node by its key and set Part.isHighlighted so that the binding can be used.

9

How to set Part.isHighlighted ?

10

https://gojs.net/latest/intro/highlighting.html#HighlightingNodesAndLinks

11

The below code is not working

I need to highlight the text if the key value is “id”. (based on condition need to highlight while load tree)

this.$(go.TextBlock,
      // Shape.stroke is red when Node.isHighlighted is true, black otherwise
      new go.Binding('stroke', 'isHighlighted',
                     function(h) { return h ? 'red' : 'green'; }).ofObject()),
12

You don’t show the code where you are setting Part.isHighlighted. That is a requirement for your binding to work.

13

If you just want to change the color of something when some data property value is a specific value, you don’t need to use Part.isHighlighted. Just use a regular Binding.

14

Unable to bind the link color for mapping. I try to change the stroke color for Mapping but its not binding.

new go.Binding(‘stroke’, ‘isUserDefined’, function (s) { return (s) ? ‘#ff6309’ : ‘lightblue’; }),

this.myDiagram.linkTemplateMap.add('Mapping',
      this.$(this.mapLink,
        { isTreeLink: false, isLayoutPositioned: false, layerName: 'Foreground' },
        { fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
        { relinkableFrom: true, relinkableTo: true },
        this.$(go.Shape, { stroke: '#ff6309', strokeWidth: 1 },
          new go.Binding('stroke', 'isUserDefined', function (s) { return (s) ? '#ff6309' : 'lightblue'; }),
        ),
      ));
15

Your template looks OK. It appears that you are assuming link.data.isUserDefined defaults to true.

What is the link data object for which you do not get a different color? To change the color are you calling Model.set (a.k.a. Model.setDataProperty) within a transaction?

1 Like