This is a migrated thread and some comments may be shown as answers.

Changing connectors to connect into left hand side of shape

1 Answer 164 Views

Diagram

This is a migrated thread and some comments may be shown as answers.

Alex asked on 20 May 2014, 09:05 AM

capture.png

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>

Changing connectors to connect into left hand side of shape

1 Answer, 1 is accepted