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
close icon

Good practise how to get added elements properties

Hi.

I have been struggling with getting proper info about added shape to diagram.
Using "collectionChange" i need to get parentId(in case for example when i drop element into swimline), and properties like shape type ect.

1. What is proper way to do that?
2. Why args.element.parentId in collectionChange event sometimes is empty?

5 Replies

SG Shyam G Syncfusion Team October 4, 2019 12:30 PM UTC

Hi Enova, 
 
Please use drop event to get a dropped element and its target. Please refer to a code example and sample below. 
 
Code example: 
  <ejs-diagram #diagram id="diagram" width="100%" height="100%" [snapSettings]='snapSettings' 
                [nodes]="nodes" [connectors]="connectors" (drop)="drop($event)"> 
            </ejs-diagram>   
 
 public drop(args: IDropEventArgs): void { 
      // get dropped element 
        let droppedElement = args.element; 
        //get target element lane  
        let targetElement = args.target; 
        //get a swimlane 
        let swimlane = this.diagram.getObject((args.target as any).parentId);   
    } 
 
 
 
Regards, 
Shyam G 



EN enova October 7, 2019 10:15 AM UTC

The example seem like to refers to angular project, we are using pure JavaScript version.
Even if I use drop method parentId becomes empty.
I need to know in with lane of swimlane shape is dropped.

What we need:
1. Add shape into lane - id or number of lane that is parent for dropped shape(when there is more than one lane in swimlane).
2. Add lane into existing swimlane - how to determine that this is new lane(and parentId of swimlane) not new swimlane and position(at the end/start).
3. Can you provide an example of that usage in pure JavaScript?




SG Shyam G Syncfusion Team October 9, 2019 09:57 AM UTC

Hi Enova, 
 
Sorry for the delay. 
 
Query 
Response 
Add shape into lane - id or number of lane that is parent for dropped shape(when there is more than one lane in swimlane). 
In the drop event, we have shown how to get the swimlane and lanes count. Please refer to a code example and sample below. 
 
Code example: 
  //Initializes diagram control 
    var diagram = new ej.diagrams.Diagram({ 
        width: '100%', height: '100%', 
        drop: function drop(args) {   
          //get diagram instance 
          var diagram = document.getElementById("diagram").ej2_instances[0]; 
          // get dropped element 
          var droppedElement = args.element; 
          //get target element lane  
          var targetElement = args.target; 
          //get a swimlane 
          var swimlane = diagram.getObject(args.target.parentId); 
          //iterate lanes 
          if(swimlane && swimlane.shape.lanes.length > 0) { 
              for(var i =0; i < swimlane.shape.lanes.length; i++) { 
                 // get a lanes collection 
                  var lanes = swimlane.shape.lanes[i];  
              } 
          } 
        }, 
}); 
    diagram.appendTo('#diagram'); 
 
Add lane into existing swimlane - how to determine that this is new lane(and parentId of swimlane) not new swimlane and position(at the end/start).  
When we add a new lane into a existing swimlane, the collectionChange event gets triggered. In this event, you will get a lane object. However we have an issue in this event. We have logged a defect report on this. The patch for the reported issue will be available in our weekly patch release 23rd October, 2019. 
 
You can track the status of this issue in the below feedback link. 
 
 
 
Regards, 
Shyam G 



SG Shyam G Syncfusion Team October 23, 2019 07:33 AM UTC

Hi Enova, 
 
Sorry for the inconvenience. 
 
Due to complexity in issue, we have not included the fix in the current release(17.3.19). Also, we have fixed the issue but needs to be ensured in various scenarios. However we will ensure and provide the patch in our weekly patch release 30th October, 2019.  
 
Regards, 
Shyam G 



SG Shyam G Syncfusion Team October 30, 2019 12:19 PM UTC

Hi Enova,     
   
Reported Issue : CollectionChange event support while adding lanes at runtime. 
   
We are glad to announce that our patch release (v17.3.21) is rolled out successfully and In that release, we have added the fix for reported issue.     
      
Please upgrade to the latest version packages to resolve this issue.      
   
Regards,   
Shyam G  


Loader.
Live Chat Icon For mobile
Up arrow icon