Auto sizing shapes and overlapping connectors

[B]

Hi -

I'm trying to figure out how to autosize shapes to fix text and also nicely connect shapes.  For the most part this works, but when there are two shapes that connect back to one another the connectors overlap.  Is there a clean way of dealing with this?

Here is an example:

 

<div id="diagram"></div>
<script>

  var conns = [{"from":"338338","to":"338339","Label":"Send to Compliance"},{"from":"338338","to":"338341","Label":"Close Compliant"},{"from":"338339","to":"338338","Label":"Reject to Bank"},{"from":"338339","to":"338340","Label":"Review Complete"},{"from":"338340","to":"338341","Label":"Close Complaint"}];

  var nodes = [{"id":"338338","Name":"New Complaint","IsFirst":true},{"id":"338339","Name":"Compliance Review","IsFirst":false},{"id":"338340","Name":"Contact Customer","IsFirst":false},{"id":"338341","Name":"Closed","IsFirst":false}]

 $("#diagram").kendoDiagram({
        dataSource: nodes,
        connectionsDataSource:conns,
        layout: {
            type: "tree",
            subtype: "right"
        },
        shapeDefaults: {
            type: "rectangle",
            fill: {
              gradient: {
                type: "linear",
                stops: [{
                  color: "#1696d3",
                  offset: 0,
                  opacity: 0.5
                }, {
                  color: "#1696d3",
                  offset: 1,
                  opacity: 1
                }]
              }
            },
            content: {
                color: "White",
                template: "#= Name #"
            },
            height: 70,
            hover: {
                fill: "Gray"
            }
        },
        connectionDefaults: {
            stroke: {
                color: "#979797",
                width: 1
            },
            type: "polyline",
            startCap: "FilledCircle",
            endCap: "ArrowEnd",
            content:{
                template:"#= Label#"
            }
        },

        autoBind: true
    });




</script>

[Dimiter Topalov]

Hi Brandon,

The connection model has fromConnector and toConnector fields that can be used to configure the end points of the two-way connections such that they do not overlap. You can also define custom connectors via the shapeDefaults.connectors option.

I have modified the provided code sample to illustrate the suggested approach:

http://dojo.telerik.com/AWUgE

Dynamically adjusting the shape width according to its text content is not supported, the width can be set via the shapeDefaults.width option.

I hope this helps.

Regards,
Dimiter Topalov
Telerik