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.
Attached is the diagram I want to get.
12 Answers, 1 is accepted
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:
(you can copy this Diagram into a project and run it to see the result)
I tried this , connections does not work.
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.
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.
You can follow the instructions from this help article in order to display a scrollbar for the Diagram:
It will also work for the MVC Diagram.
1. Wrap the Diagram declaration in a scrollable element:
2. Handle the DataBound event:
3. Set Pannable(false) and ZoomRate(0).
If you prefer to fit the shapes into the Diagram, use the bringIntoView method like shown in the demos:
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.