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. Image for the cookie policy date

Add new custom property to nodes

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!

5 Replies

SG Shyam G Syncfusion Team 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 



BJ Bjork 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.


SG Shyam G Syncfusion Team 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 



SG Shyam G Syncfusion Team 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 



SG Shyam G Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon