Dynamically update node properties from form

[Kaushik]

Hi

I have form in which user inputs or selects from dropdown or picks color for Node in a diagram

Eg:

1. Input field to get content for a node.

2. Color picker for fill color property of a node

How do i update the node properties after getting the user input.

I have attached a sample form, where i get the user input. How do i update the node properties of a single node in diagram? Is it possible?

Attachment: Screenshot_20210107_at_12.59.45_PM_31bbf733.zip

[Aravind Ravi]

Hi Kaushik, 

 

We have created a sample to change the fill and stroke color for the node. By using the node’s style properties we can able to change the color for the node. Set the input value to the node style’s fill property , so that node fill color gets changed. Similarly, by using the Style’s strokeColor property we can able to change the node border color. Through node’s height and width properties we can able to change the selected node height and width. Please refer to below code snippet for how to change the node properties at run time 

 

public ColorChange(args) { 

//Get the selected node from diagram’s selected items collection. 

    let node: NodeModel = this.diagram.selectedItems.nodes[0]; 

    node.style.fill = args.target.value; 

    this.diagram.dataBind(); 

  } 

 

  public StrokeChange(args) { 

    let node: NodeModel = this.diagram.selectedItems.nodes[0]; 

    node.style.strokeColor = args.target.value; 

    node.style.strokeWidth = 3; 

    this.diagram.dataBind(); 

  } 

 

  public OnHeight() { 

    let node: NodeModel = this.diagram.selectedItems.nodes[0]; 

    node.height = 200; 

    this.diagram.dataBind(); 

  } 

  public OnWidth() { 

    let node: NodeModel = this.diagram.selectedItems.nodes[0]; 

    node.width = 200; 

    this.diagram.dataBind(); 

  } 

 

We have attached a video demonstration for how to change the color. Please find the video in below link 

 

Video: https://www.syncfusion.com/downloads/support/forum/161241/ze/Node-Property-1181555744 

 

Sample: https://stackblitz.com/edit/angular-g1wq1a 

 

Note: To change the node color at run time, first select the node in the sample and change its color using the HTML input. 

 

Regards 

Aravind Ravi 

[Manoj Adhikari]

how can just updating a property update the node/connector if that property is already bound to some UI element

[Balasubramanian Manikandan]

We updated the sample for your use. Here, we included a color-picker component to let you alter the node's fill and stroke colors as well as a numeric text box to let you change the node's height and width. Refer to the sample below.

Sample

https://stackblitz.com/edit/angular-g1wq1a-61uczh?file=app.component.html