Divining the interconnect flow between shapes in a diagram

6 posts, 0 answers
  1. Lloyd
    Lloyd avatar
    10 posts
    Member since:
    Nov 2007

    Posted 29 Mar 2018 Link to this post

    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.

  2. Vessy
    Admin
    Vessy avatar
    2093 posts

    Posted 02 Apr 2018 Link to this post

    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.
  3. Lloyd
    Lloyd avatar
    10 posts
    Member since:
    Nov 2007

    Posted 06 Apr 2018 in reply to Vessy Link to this post

    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.

  4. Vessy
    Admin
    Vessy avatar
    2093 posts

    Posted 11 Apr 2018 Link to this post

    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.
  5. Lauri
    Lauri avatar
    1 posts
    Member since:
    Nov 2018

    Posted 02 Nov 2018 Link to this post

    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?
  6. Vessy
    Admin
    Vessy avatar
    2093 posts

    Posted 07 Nov 2018 Link to this post

    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.
Back to Top