How to change node properties from event?

[Michal Cywinski]

I'm trying to change the node properties (such as color or border width) from the click event.

So far I've programmed a click handler:

function handleDiagramClick(args) {
    if (args.actualObject.type !== 'bpmn') {
        // Some of my irrelevant logic is here...
        return;
    }
 
    // Here I'd like to set node properties
}

I see that args contain property object and actualObject - which one should I update? How do I make the diagram refresh with my changes? Can I use hex colors? If not, what is permitted list of colors that are passed as string (for instance 'darkcyan', 'black')?

[Shyam G]

Hi Michal, 

Please use updateNode method in the click event to achieve your requirement. 

Code example: 

$("#diagram").ejDiagram({ 

  

                    click: click, 

                      

                }); 

function click(args) {             

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

            if (args.element) { 

                diagram.updateNode(args.element.name, {fillColor:"red"}); 

            } 

        } 

JSPlayground link:http://jsplayground.syncfusion.com/n4fwerkv 

Regards, 

Shyam G