Replace Group

[Ivan]

Can I replace the Group into the Node at runtime of a button click?

[Ivan]

example in attach file

Attachment: Example_ebe7bb2.7z

[Shyam G]

Hi Ivan,

We have created a sample to achieve your requirement and it is available in the below link for download. Please refer to the code example and sample below.

Code example:

<script type="text/javascript">

    var tempNode;

    var connectors = [];

    function addnode() {

        var diagram = $("#Diagram1").ejDiagram("instance");

        //to get the selecteditems

        var node = diagram.model.selectedItems.children[0];

        //you can pass the node name in the findNode method to get the node object

   //var node = diagram.findNode("group");

        tempNode = node;

        if (node) {

            for (i = 0; i < node.inEdges.length; i++) {

                var connector = $.extend(true, [], diagram.findNode(node.inEdges[i]));

                connectors.push(connector);

            }

            for (j = 0; j < node.outEdges.length; j++) {

                var connector1 = $.extend(true, [], diagram.findNode(node.outEdges[j]));

                connectors.push(connector1);

            }

            diagram.remove();

            diagram.add({ name: tempNode.name, width: 100, height: 100, offsetX: 400, offsetY: 200 });

            diagram.add(connectors);

        }

    }

 </script>


Sample:http://www.syncfusion.com/downloads/support/forum/121890/ze/ivansample1474704901

Regards,
Shyam G

[Ivan]

Thank you for the quick help!!!

In Example  group was created from the model. This group contains nodes, but the group is created via the context menu (Grouping -> Group), contains the names of the nodes. Can I add nodes via the context menu into the group?

[Shyam G]

Hi Ivan,

By default, when we create a group at runtime, the group node has a children name in the group’s children property. You can pass the node name in the findNode method to get the node object. However we have created a sample in which we have added the nodes collection into the group via custom context menu. Please refer to the code example and sample below.

Code example:

  //to get the group node

  var group = diagram.findNode("group");

  //to get the group children object
  var children = diagram.findNode(group.children[0]);    

<script type="text/javascript">

     var selectednodes;

     var childnodes;

     

        $("#Diagram1").ejDiagram({

            contextMenu: {

                items: [{

                    name: "addnodes",

                    // Text to be displayed

                    text: "AddNodes",

                }],

                // Hides the default context menu items

                showCustomMenuItemsOnly: true,                

            }

        });

        function contextmenuclick(args) {            

            var diagram = $("#Diagram1").ejDiagram("instance");

            if (args.text === "AddNodes") {

                selectednodes = diagram.model.selectedItems.children;

                childnodes = $.extend(true, [], selectednodes);

                diagram.remove();

                //add the group node at runtime

                diagram.add({ name: "group", type: "group", children: childnodes });

            }

        }

 </script>

Sample: http://www.syncfusion.com/downloads/support/forum/121890/ze/ivansample8thfeb-1860454281

Regards,
Shyam G