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.
|
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,
}
}
} |
