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

Thread ID:

Created:

Updated:

Platform:

Replies:

148896 Nov 7,2019 12:31 PM UTC Nov 14,2019 04:45 AM UTC React - EJ 2 8
loading
Tags: Diagram
Dominique Toussaint
Asked On November 7, 2019 12:31 PM UTC

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?

Shyam G [Syncfusion]
Replied On 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 


Dominique Toussaint
Replied On 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.

Dominique Toussaint
Replied On 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



Shyam G [Syncfusion]
Replied On 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 


Dominique Toussaint
Replied On November 12, 2019 06:54 AM UTC

Hi Shyam,

hope this will be changed in the future.

Best regards,
Jiway S.A.

Shyam G [Syncfusion]
Replied On 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 


Dominique Toussaint
Replied On 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.

Shyam G [Syncfusion]
Replied On November 14, 2019 04:45 AM UTC

Hi JIway, 
  
Thanks for your update. 
  
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