Changing connectors to connect into left hand side of shape

2 posts, 0 answers
  1. Alex
    Alex avatar
    3 posts
    Member since:
    Mar 2014

    Posted 20 May 2014 Link to this post

    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>
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 22 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top