Mutilple parent with custom positioned connectors

[Sanjukta]

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.

[Sanjukta]

Also, How can I construct the connectionDataSource array to connect to different shapes in C# ? 

[Sanjukta]

Hi Team, Can anyone help please ?

[Tsvetina]

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

[Sanjukta]

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 ?

[Sanjukta]

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>                    )

[Tsvetina]

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

[Sanjukta]

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.

[Sanjukta]

And also How do I put a scrollbar for the diagram ?

[Sanjukta]

If scrollbar is not possible how do make the diagram fit it inside the div's height and width ?

[Sanjukta]

Hi, Can you please help ? I need a scrollbar.

[Tsvetina]

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

[Sanjukta]

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.