Add new custom property to nodes

Bjork

Asked On November 7, 2019 05:02 PM UTC

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!

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 8, 2019 06:20 AM UTC

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

Reply | Reply with quote

Bjork

Replied On November 10, 2019 10:28 PM UTC

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.

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 11, 2019 12:40 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 11, 2019 12:49 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 12, 2019 05:12 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148899	Nov 7,2019 01:15 PM UTC	Nov 12,2019 05:12 AM UTC	JavaScript - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US