Changing connectors to connect into left hand side of shape

[Alex]

Hi,

I have created a KendoDiagram using the code below. The data returned is a bit longer than below but esentially it returns 30 items at 3 levels of hierarchy. Everything works great if I have the Stroke Width set to 0. However
if the width is set to >0 the connectors look really untidy as can be seen in the attachment.

Is it possible to change the connector so that instead of going into the top centre of the shape they go into the centre left of the shape?

Thanks

Controller
        public JsonResult GetDiagramData()
        {
            var coo = new ManagementStructure() { Name = "AS", JobRole = "Chief" };

            var aj = new ManagementStructure { Name = "AJ", JobRole = "Regional" };
            var cd = new ManagementStructure { Name = "CD", JobRole = "Regional" };
            var kf = new ManagementStructure { Name = "KF", JobRole = "Regional" };
            var mc = new ManagementStructure { Name = "MC", JobRole = "Regional" };
            var sm = new ManagementStructure { Name = "SM", JobRole = "Regional" };
            var te = new ManagementStructure { Name = "TE", JobRole = "Regional" };

            coo.Items.Add(aj);
            coo.Items.Add(cd);

            aj.Items.Add(new ManagementStructure { Name = "KM", JobRole = "Area" });
            aj.Items.Add(new ManagementStructure { Name = "LW", JobRole = "Area" });

            cd.Items.Add(new ManagementStructure { Name = "AG", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "DE", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "DT", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "FT", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "JD", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "NM", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "PF", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "RW", JobRole = "Area" });
            cd.Items.Add(new ManagementStructure { Name = "SF", JobRole = "Area" });

            kf.Items.Add(new ManagementStructure { Name = "AC", JobRole = "Area" });
            kf.Items.Add(new ManagementStructure { Name = "EW", JobRole = "Area" });
            kf.Items.Add(new ManagementStructure { Name = "HS", JobRole = "Area" });

            var managers = new List<ManagementStructure> { coo };

            return Json(managers, JsonRequestBehavior.AllowGet);
        }

<script>

    function visualTemplate(options) {

        var dataviz = kendo.dataviz;

        var g = new dataviz.diagram.Group({

            autoSize: true

        });

        var dataItem = options.dataItem;

 

        g.append(new dataviz.diagram.Rectangle({

            width: 150,

            height: 50,

            stroke: {

                width: 0

            },

            background: "#1696d3"

        }));

 

        g.append(new dataviz.diagram.TextBlock({

            text: dataItem.Name,

            x: 5,

            y: 10,

            color: "#fff"

        }));

 

        g.append(new dataviz.diagram.TextBlock({

            text: dataItem.JobRole,

            x: 5,

            y: 30,

            color: "#fff"

        }));

 

        return g;

    }

</script>

 

<h2>Test Hierarchy</h2>

 

<div id="canvas" class="diagram-wrapper" style="margin: auto;">

    @(Html.Kendo().Diagram()

           .Name("diagram")

           .DataSource(dataSource => dataSource

               .Read(read => read.Action("GetDiagramData", "Home")).Model(m => m.Children("Items"))

           )

           .Layout(l => l.Type(DiagramLayoutType.Tree))

           .Layout(l => l.Subtype(DiagramLayoutSubtype.Tipover))

           .ShapeDefaults(sd => sd.Visual("visualTemplate").Stroke(s => s.DashType("dashDot")).Editable(false).Rotatable(false).Resizable(false)).Draggable(false)

           .ConnectionDefaults(cd => cd.Stroke(s => s.Color("#979797").Width(0)))

    )

</div>

<script>

    $(function () {

        // Notice that the Name() of the diagram is used to get its client-side instance

        var diagram = $("#diagram").data("kendoDiagram");

        diagram.zoom(0.75);

    });

</script>

[Hristo Germanov]

Hi Alex,

Now you can't change the position of the connectors but we will fix this issue for the next official release. Please excuse us for the inconvenience that this may cause.

I have updated your points.

Regards,
Hristo Germanov
Telerik