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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add new custom property to nodes

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
loading
Tags: Diagram
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!

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'); 
 
 


 
Regards, 
Shyam G 


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.

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 


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 


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; 
 . . . 
} 
 
 
  
Regards,  
Shyam G 


CONFIRMATION

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

This page will automatically be redirected to the 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

Live Chat Icon For mobile
Live Chat Icon