Tree Mapping : : highlight attributes based on the nodeDataArray condition

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 .

            new go.Binding('text', 'data', function(s) {
if(s.madatory) {
              new go.Binding('background', 'isHighlighted');
              return s;

What does your node data look like?

I imagine you want a simpler binding, like

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

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(),
            new go.Binding('text', 'data', function(s) { return s; }))
        )  // end Horizontal Panel

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.

Any sample code for this ?

GoJS Highlighting -- Northwoods Software has some examples.


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

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.

How to set Part.isHighlighted ?

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)

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

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

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.

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’; }),

        { 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'; }),

Your template looks OK. It appears that you are assuming 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