Hi Community,
We want to change the color of the link/edge to red whenever there is any sort of validation error happening in the link. But, I’ve observed that only for the last link the color of all segments is getting red whereas for other links the top segment is not getting changed as it’s getting overlapped by the later link segments. We want to get the link color completely red whenever any sort of validation error is happening. Please let us know how we can achieve that?
Are you using a binding on the link path’s Shape.stroke property to control its color, with a source data property indicating that there is an error? Something like this?
new go.Binding("stroke", "error", e => e ? "red" : "gray")
If so, the whole link path is in fact updated to be red, but the user cannot see it along the first two segments because a non-error link is in front of it. So you just need to change the z-ordering so that error links are in front of non-error links.
You could add a binding on the whole link template like:
$(go.Link,
{ . . . },
new go.Binding("layerName", "error", e => e ? "Foreground" : ""),
. . .
)
Hey I tried to set the z-order higher for errored out Path, but didn’t work!
new go.Binding("zOrder", "error", e => e ? 100 : 0)
Did you set zOrder: 0 as the default value on the link template?
No I didn’t set anything but this binding will do that right? whenever there is an errored edge, zOrder would be 100 or else it would be 0
I wanted to understand is this the right way to bind the zOrder property, cause even when I’m giving zOrder value 100 in my diagram Json for _isInvalid property true (error property), then also I’m not expecting the behaviour!
"edges" : [ {
"from": "fb016268-39d5-42d4-a3b5-77caa75695cb",
"to": "fb016268-39d5-42d4-a3b5-77caa75695cc",
"edge_id": "cce4fbdc435711102213698f38b8f27d",
"from_port":"1b58864543031110f5a404836ab8f209",
"to_port":"615c13aa251c2110f8778c1b14420c62",
"_isInvalid": true,
"zOrder": 100
},
{
"from": "fb016268-39d5-42d4-a3b5-77caa75695cb",
"to": "fb016268-39d5-42d4-a3b5-77caa75695cd",
"edge_id": "cce4fbdc435711102213698f38b8f27d",
"from_port":"1b58864543031110f5a404836ab8f209",
"to_port":"615c13aa251c2110f8778c1b14420c62",
"_isInvalid": false,
"zOrder": 0
},
{
"from": "fb016268-39d5-42d4-a3b5-77caa75695cb",
"to": "fb016268-39d5-42d4-a3b5-77caa75695ce",
"edge_id": "cce4fbdc435711102213698f38b8f27d",
"from_port":"1b58864543031110f5a404836ab8f209",
"to_port":"615c13aa251c2110f8778c1b14420c62",
"_isInvalid": false,
"zOrder": 0
}]
I want first edge to be come in the top of the rest two edges, but that’s not happening!
If there’s no data.error property, or if its value is undefined, the binding is not evaluated. That’s why it’s important to set the property to the default value that you want.