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 access TextElement of node content on mouseOver event?

I am using an ImageElement and TextElement in node template property of a diagram, I want to access the TextElement so I can change the color of the text on hover to white.

But on the moseOver event parameter I can't access child TextElement so I could change the color and this doesn't help:

onMouseOver(event){
//console.log("On mouse over event", event);
if(event.actualObject.propName === 'nodes'){
event.actualObject.style = {
fill: '#d45e23',
color: '#fff'
}
}
}


Any ideas how I can access the color of the TextElement?

Also is there possibility to access elements over some class name?

8 Replies

SG Shyam G Syncfusion Team November 8, 2019 05:44 AM UTC

Hi Jiway, 
 
Query 
Response 
I am using an ImageElement and TextElement in node template property of a diagram, I want to access the TextElement so I can change the color of the text on hover to white. 
 
But on the moseOver event parameter I can't access child TextElement so I could change the color and this doesn't help: 
Any ideas how I can access the color of the TextElement? 
We have created a sample in which we have changed the font color of a Text to red from black in the mouseOver event. Please refer to a code example and sample below. 
 
Code example: 
<DiagramComponent id="diagram" width={"100%"} height={"700px"} nodes={nodes} 
                 mouseOver={(args) => { 
                      if(args.actualObject) { 
                        //set the text color 
                         args.actualObject.properties.style.color = "red" 
                      }     
                 }} 
               /> 
 
 
 
Also is there possibility to access elements over some class name?  
Could you please share us an exact scenario why do you need to access the DOM elements?  
 
 
Regards, 
Shyam G 



DT Dominique Toussaint November 8, 2019 07:15 AM UTC

Hi Shyam,

thank you first for your answer, I will try it. Regarding your question, because I think it would be easier to change CSS from class names in .scss files for example then to do it in JavaScript. You don't need scenario in order to see it would be easier to change style with css, that is it all-purpose to style DOM elements.

Regards,
Jiway S.A.


DT Dominique Toussaint November 8, 2019 07:52 AM UTC

Hi again Shyam,

I saw that your sample works, but I am afraid we have misunderstanding I am using TextElement like it is used in your online overview panel example (https://ej2.syncfusion.com/react/demos/?utm_source=installer&utm_medium=listing&utm_campaign=controlpanel#/material/diagram/overview), I don't want my whole node to be of shape type 'Text' like it is in your example. And I tried your solution but it doesn't work for a TextElement imported from @syncfusion/ej2-react-diagrams, even though event.actualObject.properties.style.color is not undefined and it changes its color but nothing happens on the screen, that is the changes are not rerendered.

Best regards,
Jiway S.A




SG Shyam G Syncfusion Team November 11, 2019 06:35 AM UTC

Hi Jiway, 
 
Query 
Response 
thank you first for your answer, I will try it. Regarding your question, because I think it would be easier to change CSS from class names in .scss files for example then to do it in JavaScript. You don't need scenario in order to see it would be easier to change style with css, that is it all-purpose to style DOM elements. 
We can style the node in CSS file by using its id. Please refer to a code example and sample below. 
 
Code example: 
Index.css 
 
#Rectangle_content{ 
  fill: red 
} 
 
Note: Rectangle is an node id. 
 
 
 
I saw that your sample works, but I am afraid we have misunderstanding I am using TextElement like it is used in your online overview panel example (https://ej2.syncfusion.com/react/demos/?utm_source=installer&utm_medium=listing&utm_campaign=controlpanel#/material/diagram/overview), I don't want my whole node to be of shape type 'Text' like it is in your example. And I tried your solution but it doesn't work for a TextElement imported from @syncfusion/ej2-react-diagrams, even though event.actualObject.properties.style.color is not undefined and it changes its color but nothing happens on the screen, that is the changes are not rerendered.  
The TextElement in a overview view sample is a custom panel in diagram. So, it is not possible to change the custom panel object  properties dynamically. 
 
 
 
Regards, 
Shyam G 



DT Dominique Toussaint November 12, 2019 06:54 AM UTC

Hi Shyam,

hope this will be changed in the future.

Best regards,
Jiway S.A.


SG Shyam G Syncfusion Team November 13, 2019 11:46 AM UTC

Hi Jiway, 
 
The TextElement is the container's children and is a custom element. We processed it internally and did not expose it to change its properties dynamically. Also, it is not a feasible feature. 
 
Regards, 
Shyam G 



DT Dominique Toussaint November 13, 2019 12:21 PM UTC

Hi Shyam G,

nevermind, shape type HTML of node works well as well.

Best regards,
Jiway S.A.


SG Shyam G Syncfusion Team November 14, 2019 04:45 AM UTC

Hi JIway, 
  
Thanks for your update. 
  
Regards, 
Shyam G 


Loader.
Up arrow icon