Connections with different colors according to data?

[Itai]

I need to make a diagram in which some connections are a different color, according to connection data.  For example, I may have this as connections datasource: 

 

[
  {from: 1, to: 2, type: 1},
  {from: 1, to: 3, type: 2},
  {from: 2, to: 4, type: 1}
]

The resulting diagram should have connections with one stroke color (black) for the connections from 1 to 2 and 2 to 4, and a different stroke color (red) for the connections from 1 to 3 (as it is a different type). 

 

I tried looking for something similar to `shapeDefaults.visual`, but it appears `connectionDefaults` only has this option for the content (text of the connection?), and not the stroke. 

 

Is there a way to customize the stroke color (and preferably also dash) according to the connection data?

 

Thanks. 

[Itai]

Just to be clear - the connections are set via `connectionsDataSource`, with data originating from the server. It would be highly undesired to have the server return something like `{ from: 1, to: 2, stroke: { color: "black" } }`, as the data is also used elsewhere in the application, where such visual definitions have no meaning, but rather the `type` property does. 

[Vessy]

Hi Itai,

You can attach a handler to the Diagram's change event and redraw the connections with the desired stroke color (depending on the connections data).

For example: http://dojo.telerik.com/Umeri

Regards,
Vessy
Telerik

 

 

[Itai]

Thank you, this solution works. 

Perhaps clarify in the documentation which connection configuration can and cannot be applied directly from the data source. 

[Vessy]

Hi Itai,

The color field used in the provided in my previous reply demo is a custom field, which is not part of the available fields in the ConnectionsDataSource schema. You can find a list with the fields that can be directly configured through the passed data source here:
http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/editing#declare-fields-definition-connectionsdatasource-schema

Regards,
Vessy
Telerik