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

How to edit the background color on click


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

Thanks ?

4 Replies

SG Shyam G Syncfusion Team 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 

GP Gaylord Petit 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.


GP Gaylord Petit 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 ?

NG Naganathan Ganesh Babu Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon