Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 145886 | Jul 11,2019 11:05 PM UTC | Jul 17,2019 06:04 AM UTC | Vue | 5 |
|
Tags: Diagram |
|
Query |
Response |
|
How would I make the nodes editable. For example I would like to be able to click on one of the nodes and change the start date. |
We have enabled zoomPan in the pert chart online sample. So only you could not able to select/edit a node. We have created a sample in which we have removed zoomPan tool as shown in the below code example.
Code example:
tool: DiagramTools.ZoomPan
Also, you can use click event which triggers when you click on a node. In this event, you can get an node annotations value (example: startDate, endDate ). Please refer to an code example below.
Code example:
<ejs-diagram style='display:block' ref="diagramObj" id="diagram" :width='width' :click="click" ></ejs-diagram>
click: (args) => {
if(args.element) {
//iterate an node annotation
if(args.element && args.element.annotations.length > 0) {
for( var i = 0; i < args.element.annotations.length; i++) {
var annotation = args.element.annotations[i];
//get an annotation content
var content = annotation.content;
}
}
}
}, |
|
Is it possible to drag one of the nodes to a different location on the diagram? |
Yes, you can drag a node to a different location in diagram. |
|
<ejs-diagram style='display:block' ref="diagramObj" id="diagram" :tool='tool'></ejs-diagram>
export default {
name: 'app'
data () {
return {
width: "100%",
height: "350px",
tool: DiagramTools.ZoomPan | DiagramTools.SingleSelect,
}
}
} |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
