Good practise how to get added elements properties

[enova]

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?

[Shyam G]

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);   

    } 

 

 

Sample: https://stackblitz.com/edit/angular-kgchts?file=app.component.ts 

 

Regards, 

Shyam G 

[enova]

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?

[Shyam G]

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.  https://www.syncfusion.com/feedback/9388/collectionchange-event-support-while-adding-lanes-at-runtime

 

Sample: https://stackblitz.com/edit/e4jmaa-j3bx8d?file=index.js 

 

Regards, 

Shyam G 

[Shyam G]

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 30^th October, 2019.  

 

Regards, 

Shyam G 

[Shyam G]

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.      

https://www.npmjs.com/package/@syncfusion/ej2-diagrams   

   

Regards,   

Shyam G