How to edit the background color on click

[Gaylord Petit]

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

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

Thanks ?

[Shyam G]

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()" 

                                                            (selectionChange)="test($event)">  

        <!-- 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;">  

                                                                                                         </div>  

                                                                                          </div>  

                                                            </ng-template> 

                                             </ejs-diagram> 

 

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 

    this.addDialog.hide();   

  } 

 

 

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

 

Regards, 

Shyam G 

[Gaylord Petit]

Hi,

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.

Regards.

[Gaylord Petit]

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]

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") { 

        document.getElementById( 

          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 = 

        "transparent"; 

    } 

  } 

 

Sample link: https://stackblitz.com/edit/angular-aoaev8 

 

Regards, 

 

Naganathan K G