Connections with different colors according to data?

5 posts, 1 answers
  1. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 27 Mar Link to this post

    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. 

  2. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 27 Mar in reply to Itai Link to this post

    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. 
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 30 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 30 Mar in reply to Vessy Link to this post

    Thank you, this solution works. 

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

  6. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 31 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready