Dragging and dropping angular elements from TreeView that are not Node or Connector models

Question

As described, I'm trying to drag and drop a node from TreeView, I made sure that the

TreeView

nodes are draggable. but when dragging over the Diagram, I get this error:core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'visible')    at DiagramComponent.initObject (ej2-diagrams.es2015.js:45501:1)    at Droppable.droppable.over (ej2-diagrams.es2015.js:49512:1)    at Observer.notify (ej2-base.es2015.js:2325:29)    at Droppable.trigger (ej2-base.es2015.js:5164:43)    at Droppable.intOver (ej2-base.es2015.js:7813:18)    at Draggable.intDrag (ej2-base.es2015.js:7350:33)    at _ZoneDelegate.invokeTask (zone.js:406:1)    at Object.onInvokeTask (core.mjs:25535:1)    at _ZoneDelegate.invokeTask (zone.js:405:1)    at Zone.runTask (zone.js:178:1)I looked into the file ejs-diagrams.es2015.js line 45501 (got it from the error: ​ej2-diagrams.es2015.js:45501:1), and found a BUG ​in the code, explanation:if (obj !== undefined) {......}and outside that IF STATEMENT there is this if which is an Error​:if (obj.visible) {...}the obj is undefined here, property visible can never be read outside the bigger if (if (obj !== undefined))Please fix this

Aravind Ravi · Answer

Hi Amir,We will validate and update you with more details within two
business days on May 4th 2022RegardsAravind Ravi

Aravind Ravi · Answer

Hi Amir,      Reported Issue: Exception occurs while drag and drop the
item from treeview to diagram     We can reproduce the issue and confirmed this as a defect.
We have logged a defect report for this issue. We will fix this issue and
provide the patch on May 25th, 2022 weekly patch release.       https://www.syncfusion.com/feedback/34631/exception-occurs-while-drag-and-drop-the-item-from-treeview-to-diagram   Regards,   Aravind Ravi

Amir · Answer

That was fast!Appreciate it :)

Aravind Ravi · Answer

Hi Amir,

Thanks for the update. As we promised earlier, We will fix this issue and
provide the patch on May 25th, 2022 weekly patch release.https://www.syncfusion.com/feedback/34631/exception-occurs-while-drag-and-drop-the-item-from-treeview-to-diagramRegardsAravind Ravi

Aravind Ravi · Answer

Hi Amir,

Sorry for the inconvenience caused. On the further analysis of the reported
issue, the issue can be fixed on the sample side itself. We have done an
improvement to add the node in the dragEnter event. Instead of you add
the node in the treeview’s onDragStop event, you can specify the node in the
diagram dragEnter event. When you drag the node from treeview and enter it into the diagram, the diagram’s dragEnter event gets
triggered. In that event, set the diagram node in the dragItem argument. So
that when you drag and drop a node from treeview to diagram, the node gets dropped
properly without any exception. Please refer to the below code snippet and
sample

//HTML
   
  <ejs-diagram
            #diagram
           
  id="diagram"
           
  width="100%"
           
  height="700px"
           
  [snapSettings]="snapSettings"
           
  [getConnectorDefaults]="connDefaults"
           
  [getNodeDefaults]="nodeDefaults"
           
  [nodes]="nodes"
            (dragEnter)="dragEnter($event)"
          >
   
  //ts
  public dragEnter(args: IDragEnterEventArgs) {
      let lable = '';
      if
  (args.dragData) {
        lable =
  (args.dragData as any).text;
      }
      let node:
  NodeModel = {
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
   
        annotations:
  [{ content: lable }],
      };
  // Set the node to the dragItem
  argument
      args.dragItem =
  node;
    }

Sample: https://stackblitz.com/edit/angular-ydjhjz-urkh1p?file=app.component.tsRegardsAravind Ravi

Amir · Answer

Hi Ravi!I've tried the solution you suggested and it solves the problem.Thank you for your time and service,Amir

Aravind Ravi · Answer

Hi Amir,Most welcome. Please get back to us if you need any further
assistance.RegardsAravind Ravi