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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to edit the background color on click

Thread ID:





151231 Feb 4,2020 03:50 PM UTC Feb 6,2020 12:30 PM UTC Angular - EJ 2 4
Tags: Diagram
Gaylord Petit
Asked On February 4, 2020 03:50 PM UTC


How can i change the background color of the node when i clicked on it ?

Thanks ?

Shyam G [Syncfusion]
Replied On February 5, 2020 10:13 AM UTC

Hi Gaylord, 
In your sample, you have rendered a HTML node in the layout. So, you need to set the background color for the content of the template not for the node. We have modified your sample in which you can change the html content color by clicking the user handle edit button. Here is the modified code example and the sample below. 
Code example: 
               <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getConnectorDefaults]='connDefaults' 
                                                            [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' 
                                                            [snapSettings]='snapSettings' [selectedItems]="selectedItems" 
                                                            [serializationSettings]="serializationSettings" [getCustomTool]="getCustomTool" (click)="test()" 
        <!-- Html template to render HTML node --> 
                                                            <ng-template #nodeTemplate let-data>   
                                                                                          <div style="height: 100%; width: 100%"> 
                                                                                                         <div id="{{data.id}}_template" 
                                                                                                                        style="color:white;border:1px solid black;border-top:3px solid red;height:100%;width:100%;box-sizing: border-box;">  
public updatedlgButtonClick(evt: Event): void { 
    this.diagram.selectedItems.nodes[0].annotations[0].content = this.Description.value;  
    document.getElementById(this.diagram.selectedItems.nodes[0].id+'_template').style.borderTop = "3px solid "+this.Couleur.value 
Shyam G 

Gaylord Petit
Replied On February 5, 2020 10:50 AM UTC


It's not what i want.
I want to change the background color of the node not with on click on userhandle but when i click on the node.


Gaylord Petit
Replied On February 5, 2020 11:18 AM UTC

In addition, I want that when I click on the element it changes the background as requested but also that when the user reclick on the same element we can deselect it and therefore change its background.

What we basically want is that the user can select an element in the organization chart and therefore that the background changes color but if he makes a mistake, he can get back to the original background and unselect.

You see ?

Naganathan Ganesh Babu [Syncfusion]
Replied On February 6, 2020 12:30 PM UTC

Hi Gaylord, 
We suggest you to use “selectionChange” event to change the color of node when selecting/unselecting the node. Please refer to the below code example and sample. 
Code example: 
public selectionChange(args: ISelectionChangeEventArgs): void { 
    if (args.state === "Changed") { 
      if (args.type === "Addition") { 
          this.diagram.selectedItems.nodes[0].id + "_template" 
        ).style.backgroundColor = "blue"; 
    if (args.state === "Changing") { 
      let node = args.oldValue[0] as NodeModel; 
      document.getElementById(node.id + "_template").style.backgroundColor = 
Naganathan K G 


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