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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Replace Group

Thread ID:





121890 Feb 4,2016 09:37 AM UTC Feb 8,2016 12:09 PM UTC ASP.NET MVC 4
Tags: Diagram
Asked On February 4, 2016 09:37 AM UTC

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

Replied On February 4, 2016 10:07 AM UTC

example in attach file

Attachment: Example_ebe7bb2.7z

Shyam G [Syncfusion]
Replied On 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

Replied On 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?

Shyam G [Syncfusion]
Replied On 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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon