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

Divining the interconnect flow between shapes in a diagram

5 Answers 37 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Lloyd
Top achievements
Rank 2
Lloyd asked on 30 Mar 2018, 04:32 AM

For a given diagram, is there an easy way to walk the diagram and determine, for each shape, what the interconnects are between that shape and any other shape and on what shape nodes?  For the example, in the attached workflow diagram, there are 5 shapes with interconnects as follows:

  • Shape A connects TO Shape B
  • Shape B connects TO Shape D 
  • Shape B connects TO Shape C
  • Shape C connects TO Shape A
  • Shape D connects TO Shape E

Ideally, I need to be able to divine, for each shape, all interconnects to/from other shapes along with the specific connection node and the direction of flow (based on start cap/end cap).  I have examined the diagram object of a sample workflow and the info I'm looking for appears to all be there but it putting it all together seems to be quite convoluted.  Is there perhaps a working example available that demonstrates some of what I'm attempting to do?

Thanks.

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 02 Apr 2018, 12:09 PM
Hi Lloyd,

The Kendo Diagram widget of RadDiagram has a pretty rich API, allowing you to get reference to almost each collection of the control (like shapes, its connectors and connections). You can examine all available public members of the widget here:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram

For example, you can use the following snippet as a base for your implementation for traversing through the connectors of all shapes and the connections assigned to them:
function diagramLoad(diagram) {
    var kendoDiagram = diagram.get_kendoWidget();
    kendoDiagram.shapes.forEach(
        function (s) {
            var id = s.options.id;
            console.log(id + " has connections:");
            s.connectors.forEach(function (c) {
                if (c.connections.length) {
                    c.connections.forEach(function (conn) {
                        console.log("From: " + conn.from.shape.id);
                        console.log("To: " + conn.to.shape.id);
                        console.log("")
                    })
                }
            });
            console.log("----------------------------------");
        })
}



Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lloyd
Top achievements
Rank 2
answered on 06 Apr 2018, 04:49 PM

Thanks Vessy.  I was making things much harder than I needed to - your example was very straight-forward.

At the risk of asking a question that may be considered "off thread", is there a way to designate a connection node as being "from only" or "to only" (i.e. connections can only go one direction)?  For my workflow decision block shape, I have graphically labeled one node as being the task's input (inbound only), another being "Approved" (outbound only) and another being "Rejected" (outbound only).

Thanks.

0
Vessy
Telerik team
answered on 11 Apr 2018, 02:25 PM
Hi Lloyd,

I am afraid that the diagram does not have such built-in funtionality to restrict/set the orientation of the connections. The optimal solution I can suggest you to set the endCap of the connectins and determine their orientation depending on the given value:
https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/structure/connection#endcap

Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lauri
Top achievements
Rank 1
answered on 02 Nov 2018, 06:07 PM
Hi...I'm drawing the power plan. I have a big shape (principal). Inside a this shape I need to draw other shapes more  small. For evry shape i want to have different spacing. (shape to shape). Initially (for principal shape) in the parameters of shape I set (shape/rect) the
spacing. In this case all shapes had same clearance. But I want to management the clearances for every shape. How can I get this? Do I have to use the constraint manager?
0
Vessy
Telerik team
answered on 07 Nov 2018, 04:24 PM
Hi Lauri,

The Diagram allows to control the spacing between the shapes by configuring the HorizontalSeparation and VerticalSeparation properties under LayoutSettings, but this applies to all shapes, not only specific ones:
<telerik:RadDiagram ID="theDiagram" runat="server">
    <LayoutSettings Enabled="true" VerticalSeparation="100" HorizontalSeparation="200"></LayoutSettings>
    ...
</telerik:RadDiagram>


The only way to position each shape on a specific place at the moment is to set its X and Y coordinates (making the shape not draggable, though):
<telerik:DiagramShape Id="s2" Width="150" Height="100" X="20" Y="200">
    <ContentSettings Text="Shape B" Align="top right" />
    <HoverSettings>
        <FillSettings Color="4682B4" />
    </HoverSettings>
</telerik:DiagramShape>


Regards,
Vessy
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.
Tags
Diagram
Asked by
Lloyd
Top achievements
Rank 2
Answers by
Vessy
Telerik team
Lloyd
Top achievements
Rank 2
Lauri
Top achievements
Rank 1
Share this question
or