Connections distorted by textblock

[AP]

I am try to create a simple diagram, indicating the position of a record within a workflow. All I need is a line of different coloured circles, appropriately coloured, along with a label.

I have managed most of this, however the connectors, rather than linking to the circles, always use the text blocks to link to, meaning the lines are never straight, and not connected to the shapes.

How can I force the connectors to link to the shapes, and ignore the text?

I've attached a screenshot of the result I currently get.

 

Below is the page code:-

 

@{
    ViewBag.Title = "Index";
}

<h2>TEST</h2>

<script>
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;


        g.append(new dataviz.diagram.Circle({
            width: 50,
            height: 50,
            fill: dataItem.Colour,
            stroke: {
                width: 0
            }
        }));


        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.PositionName,
            x: 60,
            y: 20,
            color: "black"
        }));


        return g;
    }

</script>



<div>


    @(Html.Kendo().Diagram()
      .Name("diagram")
      .DataSource(dataSource => dataSource
          .Read(read => read
              .Action("GetWFData", "Test")
          )
          .Model(m => m.Children("Items"))
      )
      .Editable(false)
      .Pannable(false)
      .Zoom(0)
      .Layout(l => l.Type(DiagramLayoutType.Layered))
      .ShapeDefaults(sd => sd
          .Visual("visualTemplate")
      )
      .ConnectionDefaults(cd => cd
          .Stroke(s => s
              .Color("#979797")
              .Width(2)
          )
      )
    )




</div>

 

Thanks

[AP]

I've now managed to get the text centred in the circles, however this means the circles have to be bigger than I'd like. Ideally, I'd still like to be able to add labels to the right of the shapes.

 

The revised definition is:-

 

@{
    ViewBag.Title = "Index";
}

<h2>TEST</h2>

<script>
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;


        g.append(new dataviz.diagram.Circle({
            width: 70,
            height: 70,
            fill: dataItem.Colour,
            stroke: {
                width: 0
            }
        }));




        return g;
    }

</script>



<div>


    @(Html.Kendo().Diagram()
      .Name("diagram")
      .DataSource(dataSource => dataSource
          .Read(read => read
              .Action("GetWFData", "Test")
          )
          .Model(m => m.Children("Items"))
      )
      .Editable(false)
      .Pannable(false)
      .Zoom(0)
      .Layout(l => l.Type(DiagramLayoutType.Layered))
      .ShapeDefaults(sd => sd
          .Visual("visualTemplate")
          .Content(c => c
              .Template("#= dataItem.PositionName #")
              .FontSize(12)
              .Color("white")
          )

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




</div>

--

[Niko]

Hello Andrew,

There is an option to accomplish exactly what you wish to do. The idea is to use custom connectors  and position them at the right positions - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.connectors.position.

You need to define the Connectors in ShapeDefaults. There you should define two custom connectors - one for the top position and one for the bottom position of shapes. It is important to add the Auto connector as it is important when binding to hierarchical data. Here is a sample:

.Connectors(cs =>
{
      cs.Add().Name("Auto");
      cs.Add().Name("customTop").Position("topConnector()");
      cs.Add().Name("customBottom").Position("bottomConnector()");
})

The position definition in the connectors is a JS method call that returns a function. Here is a sample that corresponds closely to your scenario:

function topConnector() {
    return function (shape) {
        var b = shape.bounds();
        return new kendo.dataviz.diagram.Point(b.x + 25, b.y);
    };
}

function bottomConnector() {
    return function (shape) {
        var b = shape.bounds();
        return new kendo.dataviz.diagram.Point(b.x + 25, b.y + b.height);
    };
}

Hope this helps.


Regards,
Niko
Telerik

[AP]

Thanks, I'll give this a go