How to add a group node in the symbol palette in JavaScript Diagram?

This article explains how to add a group node in the symbol palette in JavaScript diagram. Group is used to cluster multiple nodes and connectors into a single element in JavaScript Diagram. Child elements inside a group can be edited individually. A group node can also be added to the symbol palette. You can also edit a child inside a group and then add it to a palette. The following code shows how to add a group node as well as the normal node in the symbol palette at runtime.

 
document.getElementById('add').onclick = function () {
        if (diagram.selectedItems.nodes.length > 0) {
            var nodes = diagram.selectedItems.nodes[0];
            if (nodes.children) {
                for (var i = 0; i < (nodes.children).length; i++) {
                    var child1 = diagram.getObject((nodes.children[i]));
                    symbolPalette.addPaletteItem('flow', child1, true);
                    symbolPalette.dataBind();
                }
                ;
            }
            symbolPalette.addPaletteItem('flow', nodes, false);
            symbolPalette.dataBind();
        }
    };
 

In the above code sample, the group node is added dynamically by using the addPaletteItem() method. When the button is clicked after the item is selected from the diagram, the selected item will be added to the symbol palette. If you want to add a group node, you have to check whether the item is a group node or not. If it is a group node, the child element will be retrieved from the getObject method.

By using the addPaletteItem method, the child will be added to the symbol palette, and then the parent will be added. The parameters of the addPaletteItem represent the name of the palette, shape added to the palette, and whether the item has a child or not. At last, the symbolPalette.dataBind() method will be invoked to apply the pending property changes immediately to the component.