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

How to change an icon in button on click, button is located in the node?

Thread ID:

Created:

Updated:

Platform:

Replies:

149622 Dec 3,2019 04:43 PM UTC Dec 6,2019 11:35 AM UTC Angular - EJ 2 3
loading
Tags: Diagram
MM
Asked On December 3, 2019 04:43 PM UTC

Hello everybody,

environment: Angular 7, Syncfusion version 17.3.27

I have couple of questions about diagram options:

  1. I would like to know is it possible to change an icon with a button click located in the node? Something like this: https://codepen.io/ulyan/pen/JKPXxd
  2. How to use NgClass or directive (*ngIf,  *ngFor, ngStyle) in HTML element, is this even possible? * example
  3. Is it possible to edit the label that is located in a node on a hover action? Something like this: https://codepen.io/MeredithU/pen/jcsvx

I have tried all the possibilities to include icons in the project (https://ej2.syncfusion.com/products/icons/index.html).
And some icons are not recognized (for example icon "ebb9" is not recognized

How to fix this?

If you can provide me an example of how to do this, I would be grateful.

    * - I have tried to make it work but I have no luck...
  public shapeany = {
    type: 'HTML',
    content: `<div style='background:#6BA5D7;height:100%;width:100%;'>
                  <button id='testButton' type='button' style='width:100px' 
                                       prefixIcon="e-icon e-handup"
                    [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }">
                    Test Button in Node
                  </button>
              </div>`
  };


Thank you,
M



Shyam G [Syncfusion]
Replied On December 4, 2019 03:03 PM UTC

Hi Maja, 
 
Query 
Response 
  1. I would like to know is it possible to change an icon with a button click located in the node? Something like this: https://codepen.io/ulyan/pen/JKPXxd
  2. How to use NgClass or directive (*ngIf,  *ngFor, ngStyle) in HTML element, is this even possible? * example
 
Your requirement can be achieved using html template only. Currently, we don’t have template support for the html node. We have logged “Template support for HTML node” as a feature and you can track the status of the feature from the below link.  
Feedback link:  
 
  1. Is it possible to edit the label that is located in a node on a hover action? Something like this: https://codepen.io/MeredithU/pen/jcsvx
We have created a sample in which we have set an annotation for the node on mouseOver event. Please refer to a code example and sample below. 
 
Code example: 
  <ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' (mouseOver)="mouseOver($event)"> 
</ejs-diagram> 
 
public mouseOver(args: IMouseEventArgs): void { 
      if(args.actualObject) {  
        if((args.actualObject as NodeModel).annotations.length > 0) { 
          //set an annotation content for the node at runtime 
            (args.actualObject as NodeModel).annotations[0].content = 'Changed Data'; 
        } 
      } 
  } 
 
 
 
 
 
Regards, 
Shyam G 


MM
Replied On December 5, 2019 07:37 AM UTC

Hello, 

Thank you for the quick answer. The example is nice, but how can I show an icon on the mouseOver event and when I click the icon I can edit text.
Is this possible?



Thank you,
M

Shyam G [Syncfusion]
Replied On December 6, 2019 11:35 AM UTC

Hi Maja, 
 
Instead of mouseover event, please use our diagram user handles to edit a node annotations at runtime. The user handle icon displayed when we select a node. We have created a sample in which, when we click on a userhandle edit icon, the dialog box opens which contains textbox. You can edit a label in the textbox and update it. Please refer to a code example, sample and help documentation below. 
 
Code example: 
 
<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [snapSettings]='snapSettings' [selectedItems]="selectedItems" [getCustomTool]="getCustomTool"></ejs-diagram> 
 
//define userhandles in selected items 
  public selectedItems: SelectorModel = { 
    constraints: SelectorConstraints.UserHandle, 
    userHandles: this.handles 
  }; 
 
     //Defines the user handle collection for nodes in diagram 
  public handles: UserHandleModel[] = [ 
    { 
            name: 'orgEditHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white', 
            pathData: 'M 42.65 30.41 L 67.5 53.99 L 41.2 78.73 C 39.41 80.42 37.34 81.27 34.99 81.27 C 32.65 81.27 30.57 80.49 28.78 78.93 L 25.05 82.44 L 0 82.44 L 16.36 67.05 C 14.57 65.36 13.67 63.41 13.67 61.2 C 13.67 58.99 14.57 56.98 16.36 55.16 z M 78.42 25.49 C 78.57 0 78.73 0.01 78.88 0.01 C 81.09 -0.12 83.09 0.66 84.88 2.35 L 97.52 14.04 C 99.17 15.86 100 17.87 100 20.09 C 100 22.29 99.17 24.24 97.52 25.93 L 71.84 50.09 L 46.79 26.51 L 72.47 2.35 C 74.15 0.77 76.13 -0.02 78.42 25.49 z', 
            side: 'Right', offset: 0, horizontalAlignment: 'Center', verticalAlignment: 'Center' 
        },  
  ];  
 
public getCustomTool: Function = this.getTool.bind(this); 
 
public getTool(action: string): ToolBase {  
    let tool: ToolBase; 
     if (action === 'orgEditHandle') {   
       //this block executes while selecting a userhandle 
            let orgEditTool: OrgEditHandleTool = new OrgEditHandleTool(this.diagram.commandHandler); 
            orgEditTool.diagram = this.diagram; 
            orgEditTool.dialog = this.dialog; 
            orgEditTool.textbox = this.textbox; 
            return orgEditTool; 
        }  
    return tool; 
  } 
 
class OrgEditHandleTool extends ToolBase { 
    public diagram: Diagram = null;  
    public dialog: DialogComponent = null; 
    public textbox: TextBoxComponent = null; 
    public mouseDown(args: MouseEventArgs): void {  
        this.inAction = true; 
        super.mouseDown(args); 
    } 
  public mouseUp(args: MouseEventArgs): void { 
    if (this.inAction) { 
      if (this.diagram.selectedItems.nodes.length > 0) {  
        //set a node value in the textbox 
        this.textbox.value =this.diagram.selectedItems.nodes[0].annotations[0].content; 
        //open the dialog 
        this.dialog.show() 
      } 
    } 
    super.mouseUp(args); 
  }  
} 
 
 
 
 
Regards, 
Shyam G 


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