Customizing node label positioning

[ahman]

Hi there,

I want customize node label position. Currently it is displaying on center of node. I want display it on top of node.

I've tried few methods given on this link: https://help.syncfusion.com/api/js/ejdiagram#members:nodes-labels

However it was working fine for previous version. It is not working fine with latest version.
Issue: Sometimes i can not drag any node on diagram, Sometimes if i drag any node, it just like creates its 100s of it's copies wherever it is dragged.
 here are few samples of code, I've tried:

var nodes = [{
	name: "imageNode", 
	width: 100, 
	height: 60, 
	offsetX: 40, 
	offsetY: 40,
	type: ej.datavisualization.Diagram.Shapes.Image,
	source: "sample/employee.png"
	borderWidth:3,
	borderColor:"white",
         labels: [{
                    text: "My Image node",
                    offset: {
                        x: 0.5,
                        y: 0
                    },

                 }]
}];

[Shyam G]

Hi Ahman, 

 

Query	Response
I want customize node label position. Currently it is displaying on center of node. I want display it on top of node.  I've tried few methods given on this link: https://help.syncfusion.com/api/js/ejdiagram#members:nodes-labels  However it was working fine for previous version. It is not working fine with latest version.	We have applied your code example in our sample and the label aligns at the top of node. please refer to the playground link below. Still if you face any problem, please share us more details such as modify the below playground link.    Playground link:  http://jsplayground.syncfusion.com/xljxmvlq
Issue: Sometimes i can not drag any node on diagram, Sometimes if i drag any node, it just like creates its 100s of it's copies wherever it is dragged.	The reported issue is a known issue and it has been fixed in the latest version 15.4.0.17. could you please check in the playground link of latest version 15.4.0.17 provided in the above row? Still if you face issues, please share us more details such as modify the below playground link and video to demonstrate an issue.

 

 

Regards, 

Shyam G 

[ahman]

Response	Query
The reported issue is a known issue and it has been fixed in the latest version 15.4.0.17. could you please check in the playground link of latest version 15.4.0.17 provided in the above row? Still if you face issues, please share us more details such as modify the below playground link and video to demonstrate an issue.	My Bad :( . I also put your image node type and source in my app, it is working fine. there is one difference. I'm rendering .svg image source in my image type node. Can you please verify it for me that is the issue occurring due to svg source type rendering??
	if you place one node over another node, both nodes label is shown. we can't differentiate which label blongs to which one: as shown in example: http://jsplayground.syncfusion.com/glunyibs
	Can i define multiple symbol palette containers? in previous version I was able to declare multiple symbol palettes for diagram but in newer version if I declare multiple palette containers, only first one is initialized and items are visible into it other symbol containers become empty: as shown in below example: http://jsplayground.syncfusion.com/npsj03sp If you notice, second symbol palette items are also visible in first one and also not moveable.
	As I'm using single ejDiagram control but need to use ej.web.min file which has lots of controls so file is quit heaver. Is there plugin available which contains only ejDiagram control?

[Shyam G]

Hi Ahman, 

 

Query	Response
My Bad :( . I also put your image node type and source in my app, it is working fine. there is one difference. I'm rendering .svg image source in my image type node. Can you please verify it for me that is the issue occurring due to svg source type rendering??	We have applied SVG image source in our sample and it is working fine at our end. Could you please check in the below sample? Still if you face any problems, please share us more details such as modify the below playground link.    Playground link: http://jsplayground.syncfusion.com/xmsnvhyi
if you place one node over another node, both nodes label is shown. we can't differentiate which label blongs to which one: as shown in example: http://jsplayground.syncfusion.com/glunyibs	We have rendered nodes and labels(HTML) in a different layer for faster rendering of our diagram. So the labels will always stay on top when we hover one node over the another. Please refer to the help documentation below.    Help documentation: https://help.syncfusion.com/js/diagram/label#limitation    However you can set labelRenderingMode as SVG to render the label in SVG mode. However we have some issue in label alignment in SVG mode. We considered this “Label Alignment issue when labelRenderingMode set as SVG” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.    https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
Can i define multiple symbol palette containers? in previous version I was able to declare multiple symbol palettes for diagram but in newer version if I declare multiple palette containers, only first one is initialized and items are visible into it other symbol containers become empty: as shown in below example: http://jsplayground.syncfusion.com/npsj03sp If you notice, second symbol palette items are also visible in first one and also not moveable.	We considered this “Issue in rendering of multiple symbol palette” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.    https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
As I'm using single ejDiagram control but need to use ej.web.min file which has lots of controls so file is quit heaver. Is there plugin available which contains only ejDiagram control?	We would like to let you know that, the Essential JS "Custom Script Generator" is used to generate the necessary Script and CSS (minified and unminified) file based on components that are used in your project. Using this we can download the individual unminified script file to render the particular control. It includes the required common files for selected control also. To get the custom script and CSS file for our controls ,you can use the Syncfusion DirectTrac credentials to log in the EJ Custom Script Generator system with the below specified link.             http://csg.syncfusion.com/combine    For your references, we have a documentation of getting started for “custom script generator” and how to use it .Please find the following link,       https://help.syncfusion.com/js/custom-script-generator

 

 

Regards, 

Shyam G