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

Make Pert example editable

Thread ID:

Created:

Updated:

Platform:

Replies:

145886 Jul 11,2019 11:05 PM UTC Jul 17,2019 06:04 AM UTC Vue 5
loading
Tags: Diagram
Derrick Whiting
Asked On July 11, 2019 11:05 PM UTC

Hello,

I am interested in extending the functionality of the Pert chart example - https://ej2.syncfusion.com/vue/demos/#/material/diagram/pert-chart.html
Here are a couple of questions I have:

1. 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.
2. Is it possible to drag one of the nodes to a different location on the diagram?

Thanks!

Ramya Thirugnanam [Syncfusion]
Replied On July 12, 2019 09:39 AM UTC

Hi Derrick,  
 
Thanks for contacting Syncfusion support. 
 
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.  
 
 
Regards,  
Ramya T 


Derrick Whiting
Replied On July 12, 2019 04:17 PM UTC

That worked!  Thank you so much for the quick reply.

Shyam G [Syncfusion]
Replied On July 15, 2019 10:43 AM UTC

Hi Derrick, 
Thanks for your update. 
Regards, 
Shyam G 


Thin D
Replied On July 16, 2019 04:13 PM UTC

Hello Syncfusion support,

How can we enable zoomPan and make the nodes editable with SingleSelect.

As I knew, I can use Ctrl + mousewheel for zooming, I want to apply the panning feature in the diagram e.g Shift + mousemove

Thanks,



Ramya Thirugnanam [Syncfusion]
Replied On July 17, 2019 06:04 AM UTC

Hi Thin,  
  
Please set diagram tool property as  ZoomPan and SingleSelect to achieve your requirement. Please refer to the code example and help documentation below.  
  
Code example 
<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,             
            
         
     
 
 
Regards,  
Ramya T 


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