Add new custom property to nodes

[Bjork]

Hi support team!

  I'm trying to add a new custom property to a node, something like "nodes.mycustomproperty" in order to keep a value. This must be fill in with a new control that a add to interface. So far everything is ok. I added the custom control, that display the values I want. But when I save, that new property is not append to the diagram node. Also in realtime that property is overwritten every time a pick one new node and set it. 

  As a reference my new property must work similar like fontstyle. I'm using the diagram builder that come with the javascript demos Syncfusion\JavaScript\17.3.0.14\samples\web\dashboard\diagrambuilder

I got stuck in, the "alert" message is fire with the value I want, but is not binding at all.

Methods.js

function updateNode(args, prop, item) {

..........

case "MyCustomProperty":

alert(args.text.trim());

            selectedObject.MyCustomProperty= option.nodes.MyCustomProperty= args.text.trim();

            break;

    }

if (Object.keys(option).length > 0) {

/* update the node properties at runtime using diagram client side API method "updateNode". */

        diagram.updateNode(item.name, option);

        /* binding the selected object to visualize the node appearance in the property panel.  */

        ko.applyBindings(diagram._selectedObject);

    }

Thanks!

[Shyam G]

Hi Stheve Bjork, 

 

Please use node’s addInfo property to add a custom information in the node. We have created a sample to show how to create the node addInfo property initially and access at runtime. 

 

Code example: 

//Initializes the nodes for the diagram 

    var nodes = [{ 

        id: 'NewIdea', height: 60, offsetX: centerX - 50, offsetY: 80,  

        //to add custom information 

        addInfo: {"MyCustomProperty":"startNode"},  

    }, ];  

     

     

    //Initializes diagram control 

    var diagram = new ej.diagrams.Diagram({ 

        width: '100%', height: '700px', nodes: nodes,  

        //get an property at run time in click event 

        click: function (args){ 

          alert(args.element.addInfo.MyCustomProperty) 

        } 

    }); 

    diagram.appendTo('#diagram'); 

 

 

Sample: https://stackblitz.com/edit/etzltd?file=index.js 

Help documentation: https://ej2.syncfusion.com/javascript/documentation/api/diagram/nodeModel/#addinfo 

 

Regards, 

Shyam G 

[Bjork]

Hi!, that's part of what I need. 

I'm editing Syncfusion\JavaScript\17.3.0.14\samples\web\dashboard\diagrambuilder

I'm able to add the custom property when I initialize the diagram, there's no problem with that. The problem comes when I want to put a value in there(in real time), for example the font-size I want to be in that custom property. That's the part I have trouble with.

I'm working in the methods.js trying to bind the "font-size" value to the new custom property.

[Shyam G]

Hi Stheve Bjork, 

 

Can you please list the properties in the diagram builder that you have issue, so we can modify them in our diagram builder sample and share them with you. 

 

Regards, 

Shyam G 

[Shyam G]

Hi Stheve Bjork, 

 

Please ignore our previous update. 

 

We will check your issue in our diagram builder sample and update you with more details soon. 

 

Regards, 

Shyam G 

[Shyam G]

Hi Stheve Bjork,  

  

 We have created a diagram builder sample in which we have maintained custom property named as customFontSize in the selectedObject. When you update the fontSize value at runtime and it will be stored in the custom property. Please refer to a code example and sample below. If we misunderstood your requirement, please share us more details such as elaborate your issue in detail with screenshot or modify the sample. 

 

Code example: 

function SelectorVMClass() { 

   . . .  

this.customFontSize = 11; 

}  

 

function updateText(args, prop, item) { 

 . . . .  

 . . . . 

 case "fontSize": 

            selectedObject.customFontSize = option.fontSize = Number(args.text.trim()); 

            break; 

 . . . 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagrambuilderSample-615333217 

  

Regards,  

Shyam G