Connections distorted by textblock

4 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 29 Jan Link to this post

    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

  2. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 29 Jan Link to this post

    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>

    --

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 03 Feb in reply to Niko Link to this post

    Thanks, I'll give this a go
Back to Top
UI for ASP.NET MVC is VS 2017 Ready