Setup nodes coordinates after autoplacing by layout

Question

Hello.I'm using your Diagram in web as elimmination chart and see wrong positioning of nodes. When the HierarchicalTree has more than 2 levels I see this (see IncorrectCoordinates.png), but should looks like (see CorrectVerticalNodeCoordinates.png)So, problem in vertical positions. I have tried to set vertical positions of nodes, but it has no effect, because I think tree automatically set coordinates after it.So does it possible to automatically place nodes as required or at least how could I set nodes AFTER automatically placing?This is my chartvar eliminationChart = new Diagram();			eliminationChart.ID = "EliminationChart";			eliminationChart.Height = "600px";			eliminationChart.Layout.Type = LayoutTypes.HierarchicalTree;			eliminationChart.Layout.Orientation = LayoutOrientations.RightToLeft;			eliminationChart.Layout.HorizontalSpacing = 25;			eliminationChart.Layout.VerticalSpacing = 35;			eliminationChart.Layout.Margin.Left = 0;			eliminationChart.Layout.Margin.Top = 20;			eliminationChart.ClientIDMode = ClientIDMode.Static;			eliminationChart.PageSettings.ScrollLimit = ScrollLimit.Diagram;			eliminationChart.SelectedItems.Constraints = ~SelectorConstraints.Rotator & ~SelectorConstraints.Resizer & ~SelectorConstraints.Tooltip;			eliminationChart.SnapSettings.SnapConstraints = SnapConstraints.None;			eliminationChart.Model.SelectionChange = "selectionChange";			eliminationChart.EnableContextMenu = false;			eliminationChart.Tool = Tool.SingleSelect;			eliminationChart.NodeTemplate = "nodeTemplate";			eliminationChart.ShowTooltip = false;			//eliminationChart.OnClientDrag = "eliminationChartDrag";			//eliminationChart.OnClientDrop = "eliminationChartDrop";			isReadOnly = false;			// Setup element defauts			eliminationChart.Model.DefaultSettings.Node = new Node()			{				Constraints = isReadOnly					? NodeConstraints.None					: NodeConstraints.Select						| NodeConstraints.PointerEvents						| NodeConstraints.Drag						| NodeConstraints.AllowDrop,				Width = 140,				Height = 30,				BorderWidth = 1			};			eliminationChart.Model.DefaultSettings.Node.Labels.Add(new Label() { ReadOnly = true });			eliminationChart.Model.DefaultSettings.Connector = new Connector()			{				LineColor = "#000000",				Constraints = ConnectorConstraints.None,				Segments = new Collection() { new Segment(Segments.Orthogonal) { Direction = "right" } },				TargetDecorator = new Decorator() { Shape = DecoratorShapes.None }			};

Andrey Kucher · Answer

Screenshots hereAttachment: screenshots_2ae335d2.7z

Shyam G · Answer

Hi Andrey, 
 
By default, connector first segment length will be set as half of the distance between its source and target ends. So only the layout in your screenshot renders in that way. However we can use connector segments length and direction property in the layouts getConnectorSegments method to customize the connectors in the layout. please refer to the below code example and JSPlayground link.  
   
Code example:   
   $("#diagram").ejDiagram(   
            layout: { type: "hierarchicaltree", getConnectorSegments:getConnectorSegments,}   
        });   
   
        function getConnectorSegments(diagram, connector) {                
            connector.segments[0].direction = "left";   
            connector.segments[0].length = diagram.model.layout.horizontalSpacing / 2;   
            return connector.segments;   
        }   
JSPlayground link: http://jsplayground.syncfusion.com/xz4ytk1f  
 
Regards, 
Shyam G

Andrey Kucher · Answer

I have applied it on server			eliminationChart.Layout.GetConnectorSegments = "getConnectorSegments";and add your function to js file but in debugger it not rise by some cause.I also discovered in your sample it's node positioning works even without getConnectorSegments function, just connectors looks different, but still good. I have compare it with my code, but can't found any difference.

Shyam G · Answer

Hi Andrey, 


We have created a sample in ASP.NET of version 16.1.0.24 and checked getConnectorSegments method which is working fine at our end. Could you please share essential studio version which you are using at your end?. Also, could you please provide us more details such as how you have defined the getConnectorSegments in JavaScript file or else please modify the below sample. 
Still if you face any issues in layout, please share your JSON data, so that we can create a sample based on your JSON data and will share it to you.  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/layoutsample-705103060 

Regards, 
Shyam G

Andrey Kucher · Answer

Hello.I have discovered a difference: this is because I'm using connectors creation instead of using DataSourceSettings.Parent. After this all works as expected. Another issue is I wonder how to set labels to nodes? As I use nodes without labels in some cases I can't use it's names as Id. I tried several solutions, but unsuccessfully. In attachment you could found my asp sample.I'm using 15.4.0.17 version. If it is crijtial to update, then tell me know.Attachment: EliminationChart_9a80fab2.7z

Andrey Kucher · Answer

I also discover another feature is not more working. I need to use callbacks with your chart and also using it with DevExpress xaf. Early we have already found solution for this: set nodes to chart, convert to JSON and store in hidden field. On loading we have just restore this json (https://www.syncfusion.com/forums/133298/diagram-and-callbacks). All works well, but on change it to store, I get "Uncaught SyntaxError: Unexpected token e in JSON at position 381 at JSON.parse (<anonymous>)" exception. Could you tell me how could I resolve this?

Shyam G · Answer

Hi Andrey, 
 




Query 

Response 


I have discovered a difference: this is because I'm using connectors creation instead of using DataSourceSettings.Parent. After this all works as expected. Another issue is I wonder how to set labels to nodes? As I use nodes without labels in some cases I can't use it's names as Id. I tried several solutions, but unsuccessfully. In attachment you could found my asp sample. 
I'm using 15.4.0.17 version. If it is crijtial to update, then tell me know. 

You can set labels for node in nodeTemplate function which triggers for each and every node. We have modified your code example. 
 
Code example: 
 
EliminationChart.js 
 
function nodeTemplate(diagram, node) {      
                node.labels[0].text = node.Labels[0].Text; 
} 
 
Here is the sample for your reference 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/layoutsample-420422399 
 
Help documentation: 
 
https://help.syncfusion.com/aspnet/diagram/automatic-layout 
 


I also discover another feature is not more working. I need to use callbacks with your chart and also using it with DevExpress xaf. Early we have already found solution for this: set nodes to chart, convert to JSON and store in hidden field. On loading we have just restore this json (https://www.syncfusion.com/forums/133298/diagram-and-callbacks). All works well, but on change it to store, I get "Uncaught SyntaxError: Unexpected token e in JSON at position 381 at JSON.parse (<anonymous>)" exception. Could you tell me how could I resolve this? 

Could you please confirm us whether you are facing an issue while loading the diagram? If so, please provide us more details such as how you are serializing the JSON object and share your JSON which you have parsing it using JSON.parse or else please modify the sample provided in the first row. 
 
 
Regards, 
Shyam G

Andrey Kucher · Answer

Captions works, thank you!Byt another part I have prepared sample for you. Please review attachmentAttachment: SyncfusionASPNETApplication2_ed47ea40.7z

Shyam G · Answer

Hi Andrey, 
 
On analyzing your code example, we found that you have parsed the JSON object. Only the JSON string can be parsed using JSON parse method. so you can directly load your JSON object using diagram load method as shown in the below code example. However “Exception raised while loading the data source in diagram” and we logged as defect. The fix for this issue is estimated to be available in our volume 1 service pack 2 release which is scheduled to release by the end of April,2018. 
 
Code example: 
 
//load the json object 
diagram.load(json); 
 
Regards, 
Shyam G

Andrey Kucher · Answer

Where could I check last releaed version number?

Shyam G · Answer

Hi Andrey, 

Please find the latest release version number from below link. The latest version is volume 1 service pack 1 release 16.1.0.32. 

Link: https://www.syncfusion.com/forums/announcements  

Regards, 
Shyam G

Andrey Kucher · Answer

Hello.Today is last day of april and I have tried your last version ( 2018 Volume 1 Service Pack Release v16.1.0.37), but still has same behavior. Is I missed something or your plans is changed?

Shyam G · Answer

Hi Andrey, 
 
We have modified your sample with version 16.1.0.37 script files. Could you please check in the below sample and get back to us if you have any issues in it. 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/may1sample-1171731348 
 
Regards, 
Shyam G

Andrey Kucher · Answer

Hello again.I have applyed your changes to my application and need to fix json parsing to 'eval' method using, because your json is contains "ej.isJSON" string ("...'dataSourceSettings':{"dataSource":ej.isJSON([{"Shape":0,..."), but I can't just send this object to function, because I'm using hidden field with string objects. Is it possible to use JSON.parse method here somehow? This json string is not looks as appropriate for flexible using. Eval is not safe... (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object). It is apporpriate solution for now, but would be cool to solve this issue.I also wonder is it ok to use old version dlls (15) with new scripts (16)?Thanks.

Shyam G · Answer

Hi Andrey, 
 




Query 

Response 


I have applyed your changes to my application and need to fix json parsing to 'eval' method using, because your json is contains "ej.isJSON" string ("...'dataSourceSettings':{"dataSource":ej.isJSON([{"Shape":0,..."), but I can't just send this object to function, because I'm using hidden field with string objects. Is it possible to use JSON.parse method here somehow? This json string is not looks as appropriate for flexible using. Eval is not safe... (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object). It is apporpriate solution for now, but would be cool to solve this issue. 


You have been serializing the diagram model to JSON object. 
After serializing it, you can pass the JSON object directly to diagram load method.
Please let us know why you need a JSON parse method and it can be used only to parse a JSON string. Also, please modify the below sample if any error facing at your end with video/screenshot.
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/layoutmodified1762681611 
 


I also wonder is it ok to use old version dlls (15) with new scripts (16)? 

No, please use dll and script files of same version. We have missed to change it in our previous sample. 
 
 
Regards, 
Shyam G

Andrey Kucher · Answer

Thanks for your answer.Really I'm using ASPxHiddenField DevExpress control, which could store string values. I see JSON.stringify() method is drop wrong code at client.In real project I have 2 places: server set hiddenField property with generated json and then client get this json from hidden field as string after page loaded. So, I'm setting json string at server and can't use stringify method there. How could I get correct json string at server in my case?

Shyam G · Answer

Hi Andrey, 
 

In the server, we use SerializeToJson method to convert JSON object to JSON string and you can pass that JSON string to client side as a parameter and load the diagram.
Instead, If you set that JSON string in hidden field value and retrieve it in the client side, the JSON string has a double quotes at start and end of a string for hidden field value. So only, it cannot be stringify or parse it in client side.
You can use eval function in client side to resolve your issue. Also, it is not possible to stringify or parse the JSON string in client side retrieved from hidden field.
It is not possible to use JSON stringify in the server side.
If we use javascriptserializer serialize and newtonsoft serialize to convert JSON object to string, then our diagram model object will not be serialized in a proper manner.
We have checked with encoding and decoding of JSON but both should be done either in client side or server side. Please refer to the link  below.
Link: https://stackoverflow.com/questions/3448831/store-return-json-value-in-input-hidden-field 
 
Please let us know if any concerns. 
 
Regards, 
Shyam G

Andrey Kucher · Answer

Thanks for your explanation and support. I see I'm using only possible way now. Thank you.

Shyam G · Answer

Hi Andrey, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G

Query	Response
I have discovered a difference: this is because I'm using connectors creation instead of using DataSourceSettings.Parent. After this all works as expected. Another issue is I wonder how to set labels to nodes? As I use nodes without labels in some cases I can't use it's names as Id. I tried several solutions, but unsuccessfully. In attachment you could found my asp sample. I'm using 15.4.0.17 version. If it is crijtial to update, then tell me know.	You can set labels for node in nodeTemplate function which triggers for each and every node. We have modified your code example. Code example: EliminationChart.js function nodeTemplate(diagram, node) { node.labels[0].text = node.Labels[0].Text; } Here is the sample for your reference Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/layoutsample-420422399 Help documentation: https://help.syncfusion.com/aspnet/diagram/automatic-layout
I also discover another feature is not more working. I need to use callbacks with your chart and also using it with DevExpress xaf. Early we have already found solution for this: set nodes to chart, convert to JSON and store in hidden field. On loading we have just restore this json (https://www.syncfusion.com/forums/133298/diagram-and-callbacks). All works well, but on change it to store, I get "Uncaught SyntaxError: Unexpected token e in JSON at position 381 at JSON.parse (<anonymous>)" exception. Could you tell me how could I resolve this?	Could you please confirm us whether you are facing an issue while loading the diagram? If so, please provide us more details such as how you are serializing the JSON object and share your JSON which you have parsing it using JSON.parse or else please modify the sample provided in the first row.

Query	Response
I have applyed your changes to my application and need to fix json parsing to 'eval' method using, because your json is contains "ej.isJSON" string ("...'dataSourceSettings':{"dataSource":ej.isJSON([{"Shape":0,..."), but I can't just send this object to function, because I'm using hidden field with string objects. Is it possible to use JSON.parse method here somehow? This json string is not looks as appropriate for flexible using. Eval is not safe... (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object). It is apporpriate solution for now, but would be cool to solve this issue.	You have been serializing the diagram model to JSON object. After serializing it, you can pass the JSON object directly to diagram load method. Please let us know why you need a JSON parse method and it can be used only to parse a JSON string. Also, please modify the below sample if any error facing at your end with video/screenshot. Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/layoutmodified1762681611
I also wonder is it ok to use old version dlls (15) with new scripts (16)?	No, please use dll and script files of same version. We have missed to change it in our previous sample.