We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Replace Group

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

4 Replies

IV Ivan February 4, 2016 10:07 AM UTC

example in attach file

Attachment: Example_ebe7bb2.7z

SG Shyam G Syncfusion Team February 5, 2016 07:06 AM UTC

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]));



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

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




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






Shyam G

IV Ivan February 5, 2016 09:55 AM UTC

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?

SG Shyam G Syncfusion Team February 8, 2016 12:09 PM UTC

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;



            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);


                //add the group node at runtime

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




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

Shyam G

Live Chat Icon For mobile
Up arrow icon