This is a migrated thread and some comments may be shown as answers.

Mutilple parent with custom positioned connectors

12 Answers 44 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Sanjukta
Top achievements
Rank 1
Sanjukta asked on 09 Aug 2018, 05:48 PM

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.

12 Answers, 1 is accepted

Sort by
0
Sanjukta
Top achievements
Rank 1
answered on 09 Aug 2018, 06:16 PM
Also, How can I construct the connectionDataSource array to connect to different shapes in C# ? 
0
Sanjukta
Top achievements
Rank 1
answered on 10 Aug 2018, 06:25 PM
Hi Team, Can anyone help please ?
0
Tsvetina
Telerik team
answered on 13 Aug 2018, 11:42 AM
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.
0
Sanjukta
Top achievements
Rank 1
answered on 13 Aug 2018, 03:58 PM
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 ?
0
Sanjukta
Top achievements
Rank 1
answered on 13 Aug 2018, 08:04 PM

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>                    )
0
Tsvetina
Telerik team
answered on 15 Aug 2018, 11:15 AM
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.
0
Sanjukta
Top achievements
Rank 1
answered on 16 Aug 2018, 06:44 PM

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.

0
Sanjukta
Top achievements
Rank 1
answered on 16 Aug 2018, 07:09 PM
And also How do I put a scrollbar for the diagram ?
0
Sanjukta
Top achievements
Rank 1
answered on 17 Aug 2018, 01:22 AM
If scrollbar is not possible how do make the diagram fit it inside the div's height and width ?
0
Sanjukta
Top achievements
Rank 1
answered on 17 Aug 2018, 05:16 PM
Hi, Can you please help ? I need a scrollbar.
0
Tsvetina
Telerik team
answered on 20 Aug 2018, 11:56 AM
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.
0
Sanjukta
Top achievements
Rank 1
answered on 20 Aug 2018, 04:04 PM
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.
Tags
Diagram
Asked by
Sanjukta
Top achievements
Rank 1
Answers by
Sanjukta
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or