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 96 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 20 May 2014, 09:05 AM
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>

1 Answer, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 22 May 2014, 12:21 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Alex
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Share this question
or