Mutilple parent with custom positioned connectors

13 posts, 0 answers
  1. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 09 Aug 2018 Link to this post

    Hi Team,

                I am new to Kendo MVC and have a requirement. I want to achieve the below diagram is it possible ?

    I am getting the shapes.

    Please note the connector positions. They are not overlapping. every connector is different direction so that it looks good.

    Please help.

    Attached is the diagram I want to get.

  2. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 09 Aug 2018 in reply to Sanjukta Link to this post

    Also, How can I construct the connectionDataSource array to connect to different shapes in C# ? 
  3. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 10 Aug 2018 in reply to Sanjukta Link to this post

    Hi Team, Can anyone help please ?
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 13 Aug 2018 Link to this post

    Hello Sanjukta,

    In general, when using a connectionsDataSource, you can specify the IDs of the shapes, which a connection should start from and end at but you cannot specify the points in the Diagram through which the connection should pass. You can see a list of the supported connection properties in a connectionsDataSource here: Connection Model Fields (these fields apply to the MVC Diagram, too). The exact algorithm used to route the connections depends on the Diagram Layout settings. In general, the Diagram tries to draw connections in a way that they do not overlap. You can see a flowchart-like client-side example here:
    Create Flowchart from Local Data by Using the Diagram

    If you prefer to list the exact points through which a connection passes in the Diagram, you can declare the shapes and connections directly in the Diagram and apply intermediate Points to the connections:
    @(Html.Kendo().Diagram()
          .Name("diagram")
          .Shapes(s=> {
              s.Add().Content(c => c.Text("Shape 1")).Id("1").X(100).Y(100);
              s.Add().Content(c => c.Text("Shape 2")).Id("2").X(220).Y(220);
              s.Add().Content(c => c.Text("Shape 3")).Id("3").X(100).Y(320);
          })
          .Connections(c=> {
              c.Add()
                .From(f => f.Id("1"))
                .To(t => t.Id("2" ))
                .FromConnector("Right")
                .Type(DiagramConnectionType.Polyline)
                .Points(p=>p.Add().X(270).Y(150))
                .EndCap(cap=>cap.Type("ArrowEnd"));
              c.Add()
                .From(f => f.Id("2"))
                .To(t => t.Id("3"))
                .EndCap(cap => cap.Type("ArrowEnd"));
              c.Add()
                .From(f => f.Id("3"))
                .To(t => t.Id("1"))
                .EndCap(cap => cap.Type("ArrowEnd"));
          })
          .Editable(false)
          .ConnectionDefaults(cd => cd
              .Stroke(s => s
                  .Color("#979797")
                  .Width(2)
              )
          )
    )

    (you can copy this Diagram into a project and run it to see the result)

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 13 Aug 2018 in reply to Tsvetina Link to this post

    Thanks Tsvetina. The code you have given works fine, but I cannot add all connections manually. Is there a way to loop my datasetand create an object array and assign it to connections ?
  6. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 13 Aug 2018 in reply to Tsvetina Link to this post

    I tried this , connections does not work.

    @(Html.Kendo().Diagram()<br>                            .Name("workflowOverviewDiagram")<br>                            .DataSource(dataSource => dataSource<br>                            .Read(read => read.Action("GetWorkflowStopData", "WorkflowMaintenance", new { area = "Maintenance", workflowDefinitionId = Model.OtcId }))<br>                            .Model(m =><br>                            {<br>                                m.Id("WorkflowStopToId");<br>                                m.Children("Items");<br>                            })<br>                            )<br>                            .Editable(false)<br>                            .Layout(l => l<br>                                        .Type(DiagramLayoutType.Tree).Subtype(DiagramLayoutSubtype.Down)<br>                            )<br>                            .Connections(c =><br>                            {<br>                                c.Add()<br>                                  .From(f => f.Id("6000106"))<br>                                  .To(t => t.Id("6000102"))<br>                                  .FromConnector("Bottom")<br>                                  .ToConnector("Left")<br>                                  .EndCap(cap => cap.Type("ArrowEnd"));<br>                            })<br>                            .ShapeDefaults(sd => sd.Visual("visualTemplate"))<br>                            .Pannable(false)<br>                            .ZoomRate(0)<br>                            .ConnectionDefaults(cd => cd<br>                                .EndCap("ArrowEnd")<br>                                .Stroke(s => s<br>                                .Color("#979797")<br>                                .Width(2)<br>                            )<br>                            )<br>                            .Events(events => events.DataBound("onDataBound"))<br>                    )
  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 15 Aug 2018 Link to this post

    Hi Sanjukta,

    Could you show what your current data set looks like, what information is there in the data items? The example I gave you with the Connections list is meaningful if you want to declare custom points for each connection to pass through. If you will be using a built-in layout (I see you are already using a tree layout) and there are no pre-defined points, it is better to keep using a connectionsDataSource instead of a connections list.
    If you are still only testing the scenario and can share the project that you are working on with us, it would be best if you open a support ticket and send us the project, so we can see what is the current look with your data and then explain how you actually want it to look.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 16 Aug 2018 in reply to Tsvetina Link to this post

    Hi, Sorry for the late reply. I tried ConnectionDatasource, but it does not work. I am manually connecting each nodes via connect option. But the labels and connectors are overlapping. Please find the attached image.

    How can make it look good ? I have now only today to submit the work.

    Please help.

  9. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 16 Aug 2018 in reply to Sanjukta Link to this post

    And also How do I put a scrollbar for the diagram ?
  10. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 16 Aug 2018 in reply to Sanjukta Link to this post

    If scrollbar is not possible how do make the diagram fit it inside the div's height and width ?
  11. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 17 Aug 2018 in reply to Sanjukta Link to this post

    Hi, Can you please help ? I need a scrollbar.
  12. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 20 Aug 2018 Link to this post

    Hi Sanjukta,

    You can follow the instructions from this help article in order to display a scrollbar for the Diagram:
    Use Scrollbars

    It will also work for the MVC Diagram.

    1. Wrap the Diagram declaration in a scrollable element:
    <div style="overflow:auto; width: 1000px; height: 300px;">
      @(Html.Kendo().Diagram()
      .Name("diagram")
      .....
      )
    </div>

    2. Handle the DataBound event:
    .Events(e=>e.DataBound("onDataBound"))

    function onDataBound(e) {
          var bbox = this.boundingBox();
          this.wrapper.width(bbox.width + bbox.x + 50);
          this.wrapper.height(bbox.height + bbox.y + 50);
          this.resize();
    }

    3. Set Pannable(false) and ZoomRate(0).
    @(Html.Kendo().Diagram()
          .Name("diagram")
          .Pannable(false)
          .ZoomRate(0)
          )

    If you prefer to fit the shapes into the Diagram, use the bringIntoView method like shown in the demos:
    @(Html.Kendo().Diagram()
          .Name("diagram")
          .Events(events => events.DataBound("onDataBound"))
    )

    function onDataBound() {
        this.bringIntoView(this.shapes);
    }

    With regard to the shapes, could you open a support thread and send us a runnable project showing your current Diagram implementation? We will check to see what is the best approach to address the overlapping connections.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Sanjukta
    Sanjukta avatar
    14 posts
    Member since:
    Jul 2018

    Posted 20 Aug 2018 in reply to Tsvetina Link to this post

    Thanks Tsvetina for the solution. It works for 90% what I wanted, I am trying to figure out the rest 10%. But I still need to fix the overlapping of labels, if two stops are connected back and forth. Let me try few things, if not I can get back to you. Thanks for the help again.
Back to Top