make user to enter the text of nodes at the time of dropping into the diagram space

[RakhiS]

Hi,

How can I make user to forcely enter the text on the node at the time of creating (that is when user select node from the pallate and drop on the diagram space), and without entering text into it the node should not be dropped into the diagram space.

[Suganthi Karuppannan]

Hi RakhiS, 

 

We have created a sample for your requirements. In the sample, while drag and drop the node from the palette to diagram the “drop” event is triggered. Dialog is open after drop event trigger, by using the dialog box give the content to the annotation for the newly added node. If the annotation’s content is empty, then the node gets removed from the diagram. Otherwise, the node gets added to diagram with given annotation’s content. Please refer to the code snippet in the below table. 

 

if (this.nodeFromPalette !== '') { 

      let obj = this.diagram.getObject(this.nodeFromPalette); 

      let content = (document.getElementById('annotationContent') as HTMLInputElement).value; 

      if (obj instanceof Node && obj.annotations.length > 0) { 

        if (content == '') { 

          this.diagram.remove(obj); 

        } else{ 

          obj.annotations[0].content = content; 

          this.diagram.dataBind(); 

        } 

      } 

    } 

 

 

For more information about the “drop” event, Please refer to the below documentation link.   

 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/diagram/iDropEventArgs/ 

 

We have attached the sample for your reference.  Please refer to the sample in the below link. 

 

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

 

 

Regards,   

Suganthi K. 

[RakhiS]

Thanks, it is working

[RakhiS]

Hi RakhiS, 

 

We have created a sample for your requirements. In the sample, while drag and drop the node from the palette to diagram the “drop” event is triggered. Dialog is open after drop event trigger, by using the dialog box give the content to the annotation for the newly added node. If the annotation’s content is empty, then the node gets removed from the diagram. Otherwise, the node gets added to diagram with given annotation’s content. Please refer to the code snippet in the below table. 

 

if (this.nodeFromPalette !== '') { 

      let obj = this.diagram.getObject(this.nodeFromPalette); 

      let content = (document.getElementById('annotationContent') as HTMLInputElement).value; 

      if (obj instanceof Node && obj.annotations.length > 0) { 

        if (content == '') { 

          this.diagram.remove(obj); 

        } else{ 

          obj.annotations[0].content = content; 

          this.diagram.dataBind(); 

        } 

      } 

    } 

 

 

For more information about the “drop” event, Please refer to the below documentation link.   

 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/diagram/iDropEventArgs/ 

 

We have attached the sample for your reference.  Please refer to the sample in the below link. 

 

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

 

 

Regards,   

Suganthi K. 

Hi, it is working fine in case of nodes, and also I have applied in the same way in the connectors case. But When I am entering the text into its textbox, I want that it gets entered as the connectors text and show in the middle above the line of the connectors. Please help to achieve this

[Gowtham Gunashekar]

Hi RakhiS, 

 

We have modified the sample to update the connector annotation while drag and drop the connector form symbol palette and we have attached the sample link below. 

 

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

 

Regards, 

Gowtham G 

[RakhiS]

Hi,

I have created other dialogue that wil open at the time of link drop into the diagram space and the label which we provide will display on the link. For that this is my code, but here annotation[0] is showing undefined.

//-------------------------.ts file

public linkPropertiesChange() {

    if (this.linkFromPalette !== '') {

      let objlnk = this.diagram.getObject(this.linkFromPalette);

      this.connectorname = (document.getElementById('annotationContentLink') as HTMLInputElement).value;  

      if (objlnk instanceof Connector) {

        if (this.connectorname == '') {

          this.diagram.remove(objlnk);

        } else {

          objlnk.annotations[0].content = this.connectorname; it is showing error "content of undefined"

          this.diagram.dataBind();

        }

      }

    }

    this.promptDialogLink.hide();

  }

//--------.html file

                [buttons]='promptDlgButtonsLinks'

                [visible]='hidden'

                [header]='promptHeader'

                [animationSettings]='animationSettings'

                [showCloseIcon]='showCloseIcon'

                [target]='target'

                (open)="dialogOpenLink()"

                (close)="dialogCloseLink()"

                isModal="true"

                [width]='promptWidth'>

    

     

       

         

           

           

         

       

Link Text:

id="annotationContentLink"                        (focus)='onFocuslnk()' (blur)='onBlurlnk()' name="Required"                        class="e-input" />

     

   

please help to resolve this

[Shyam G]

Hi Rakhi, 

 

The reported issue occurs when you have not initialized the annotation for the symbols in the symbol palette. Either, you can define the annotation initially for the symbols in the symbol palette or you can initialize it at runtime. We have modified your code example in which we have initialized the annotation at runtime to resolve your issue. Please refer to a modified code example below. 

 

Code example: 

public linkPropertiesChange() { 

    if (this.linkFromPalette !== '') { 

      let objlnk = this.diagram.getObject(this.linkFromPalette); 

      this.connectorname = (document.getElementById('annotationContentLink') as HTMLInputElement).value;   

      if (objlnk instanceof Connector) { 

        if (this.connectorname == '') { 

          this.diagram.remove(objlnk); 

        } else { 

          objlnk.annotations = [{ content: this.connectorname }];   

          this.diagram.dataBind(); 

        } 

      } 

    } 

    this.promptDialogLink.hide(); 

  } 

 

 

 

Regards, 

Shyam G 

[RakhiS]

Hi, I tried the modified code, but it not working.

Please help!

[Shyam G]

Hi Rakhi, 

As mentioned earlier, the reported issue occurs when the annotation collection is not initialized at code behind. We have created a sample in which we have initialized annotation collection at symbol palette getNodeDefaults and getConnectorDefaults method. Please refer to a code example and the sample below. Still if you face any problem, please share us more details such as modify the below sample. 

Code example: 

<ejs-symbolpalette id="symbolpalette" [expandMode]='expandMode' [palettes]='palettes' [getSymbolInfo]='getSymbolInfo' width="100%" height="100%" [symbolHeight]=48 

                [symbolWidth]=48 [getNodeDefaults]='getSymbolDefaults' [getConnectorDefaults]='getSymbolDefaults'> 

            </ejs-symbolpalette> 

    public getSymbolDefaults(symbol: NodeModel): void { 

      //initialize node annotations 

      symbol.annotations = []; 

    }  

Sample: https://stackblitz.com/edit/angular-c6dmfq-lgfd6s?file=app.component.html 

Regards, 

Shyam G 

[RakhiS]

Hi below is my all code in detail. my problem is just after this code

This is the dialog which gets open when a link(connector) drop into the diagram space.

---------------------------------------------------------------------

step 2:

step3

step4

step5:

step6

Step7

------------------------------------------------------------------------------------------

step 8

Problem:

when I am dropping the link(connector), it opens the pop up but then it also gives error in step 4 "native element of undefined", and when I put any text in the text box and click on submit button, nothing happens. I hope u understand my issue. Please help

Thanks

[RakhiS]

Hi below is my all code in detail. my problem is just after this code

This is the dialog which gets open when a link(connector) drop into the diagram space.

---------------------------------------------------------------------

step 2:

step3

step4

step5:

step6

Step7

------------------------------------------------------------------------------------------

step 8

Problem:

when I am dropping the link(connector), it opens the pop up but then it also gives error in step 4 "native element of undefined", and when I put any text in the text box and click on submit button, nothing happens. I hope u understand my issue. Please help

Thanks

Please reply, as it is on the higher priority. I want to show two different dialogues and on supplying name it should add the name on the respective item. I am getting error native element of undefined.

[Shyam G]

Hi Rakhi, 

 

We have created a sample with your code example and fixed the issues in your application. Please find the changes highlighted in the below code example. 

 

Code example: 

<ejs-symbolpalette id="symbolpalette" [expandMode]='expandMode' [palettes]='palettes' [getSymbolInfo]='getSymbolInfo' width="100%" height="100%" [symbolHeight]=48 

                [symbolWidth]=48 [getNodeDefaults]='getSymbolNodeDefaults' [getConnectorDefaults]='getSymbolConnectorDefaults'> 

            </ejs-symbolpalette> 

 

  public getSymbolNodeDefaults(symbol: NodeModel): void { 

      symbol.annotations = [{ style: { color: 'black', fill: 'transparent' } }]; 

    } 

 

    public getSymbolConnectorDefaults(symbol: ConnectorModel): void { 

      symbol.annotations = [{ style: { color: 'black', fill: 'transparent' } }]; 

    } 

 

 

  @ViewChild('password', {static: false}) 

    public password: ElementRef; 

 

     @ViewChild('passwordlnk', {static: false}) 

    public passwordlnk: ElementRef; 

 

  public linkPropertiesChange() {  

       if (this.linkFromPalette !== '') { 

      let obj: ConnectorModel = this.diagram.getObject(this.linkFromPalette); 

      let content = (document.getElementById('annotationContentLink') as HTMLInputElement).value;  

        if (content == '') { 

          this.diagram.remove(obj); 

        } else{ 

          obj.annotations[0].content = content; 

          this.diagram.dataBind();  

        }  

      (document.getElementById('annotationContentLink') as HTMLInputElement).value= ""; 

    } 

    this.promptDialogLink.hide(); 

    } 

 

 

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

Regards, 

Shyam G 

[RakhiS]

Thankyou so much, working

[Shyam G]

Hi Rakhi, 

Thanks for your update. 

Regards, 

Shyam G