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
close icon

Hierarchical layout

Hi,

I'm trying to display an elecrical network using hierarchal layout. I have some troubles 
- tooltips do not appears on connectors, I get only the 4 arrows cursor when mouse is over one (see code below)
- I get collision between text, how could I avoid that ? (see joined screen copy)

thanks a lot,

Olivier

       /// <summary>
        /// Connects the given nodes
        /// </summary>
        /// <param name="parentNode">Parent Node</param>
        /// <param name="childNode">Child node</param>
        private void ConnectNodes(Node parentNode, Node childNode, string text)
        {
            if (parentNode != null && childNode != null)
            {

                Syncfusion.Windows.Forms.Diagram.Label label = new Syncfusion.Windows.Forms.Diagram.Label();
                label.FontStyle.Family = "Segoe UI";
                label.FontStyle.Size = 6;
                label.FontColorStyle.Color = Color.Blue;
                label.Text = text;
                label.WrapText = false;
                label.OffsetY = -1;

                OrgLineConnector conn = new OrgLineConnector(PointF.Empty, PointF.Empty);
                conn.VerticalDistance = 0;
                conn.ToolTipText = text;
                conn.Labels.Add(label);
                conn.Name = "#"+parentNode.Name+childNode.Name;
                conn.LineStyle.LineColor = Color.Gray;

                Decorator decor = conn.HeadDecorator;
                decor.DecoratorShape = DecoratorShape.Filled45Arrow;
                decor.FillStyle.Color = Color.White;
                decor.LineStyle.LineColor = Color.Gray;

                this.diagram1.Model.AppendChild(conn);

                var parok=parentNode.CentralPort.TryConnect(conn.TailEndPoint);
                var childok=childNode.CentralPort.TryConnect(conn.HeadEndPoint);
                if (!parok || !childok) {
                    MessageBox.Show("Erreur");
                }
                this.diagram1.Model.SendToBack(conn);

            }
        }

Attachment: diagram_58d0ab7e.7z

5 Replies

NG Naganathan Ganesh Babu Syncfusion Team October 3, 2017 12:45 PM UTC

Hi Olivier, 
 
Thanks for contacting Syncfusion support. 
 
tooltips do not appear on connectors, I get only the 4 arrows cursor when mouse is over one (see code below) 
The diagram.Node’s “ToolTipText” property does not affect the text display while Hovering the mouse on diagram’s nodes. Because, the Node’s “ToolTipText” property is implemented and provided in ASP.NET classic platform not in windows forms. So only we have created and provided a sample by using System.windows ToolTip in order to achieve your requirement. Please refer to our online KB documentation link:  
  
 
I get collision between text, how could I avoid that ? (see joined screen copy) 
In order to achieve your requirement, we suggest you to enable the Label’s WrapText property and set the text’s width value is based on the Node’s/Connector’s width manually.  
 
Code example: 
 
[C#] 
 
Syncfusion.Windows.Forms.Diagram.LineConnector line = new LineConnector(new PointF(200, 200), new PointF(400, 200)); 
 
Syncfusion.Windows.Forms.Diagram.Label lbl = new Syncfusion.Windows.Forms.Diagram.Label(); 
lbl.Text = "Welcome To Syncfusion"; 
lbl.Position = Position.Center; 
lbl.WrapText = true; 
lbl.Size = new SizeF(190, lbl.Size.Height); 
line.Labels.Add(lbl); 
 
Note: 
We can’t modify the height of the label, because it is based on the length of the text. 
 
Regards, 
 
Naganathan K G 



OL Olivier October 5, 2017 12:43 PM UTC

Hi, thinks for your kind answer, it helps.  I removed 2 lines : label.offset and conn.vertical distance, which are wrong and place your example. I have some more question about joined files. 

orgline view : how can I place text just above corresponding node ? Here they all goes to the center (wrap text is set to false)

line view 1 : nodes are drew far to the left. How can they be set just under corresponding nodes when only one (that's mean forcing connector to be vertical)

line view 2 : on the left off the view, text are displayed reversed. Ho can they be set always left to rigth ?  I tried  label.DirectionRightToLeft = false, no change.

About label.Orientation, how can I set it ? Orientation.Horizontal comes from System.Windows.Forms and I didn't find a value such as Syncfusion.Windows.Forms.Diagram.Label.Orientation or Syncfusion.Windows.Forms.Diagram.Orientation


Thanks,


Olivier




Attachment: views_1102924b.7z


NG Naganathan Ganesh Babu Syncfusion Team October 6, 2017 08:55 AM UTC

Hi Olivier, 
 
orgline view : how can I place text just above corresponding node ? Here they all goes to the center (wrap text is set to false) 
In order to achieve your requirement, we suggest you to use Diagram.Label’s “Position” property to set the Position as MiddleLeft. Please refer to the below code example. 
 
Code example: 
 
[C#] 
 
Syncfusion.Windows.Forms.Diagram.Label lbl = new Syncfusion.Windows.Forms.Diagram.Label(); 
lbl.Position = Position.MiddleLeft; 
 
line view 1 : nodes are drew far to the left. How can they be set just under corresponding nodes when only one (that's mean forcing connector to be vertical) 
We have created a new incident for this query. Please follow-up with that incident for furthers details.  
   
 
 
line view 2 : on the left off the view, text are displayed reversed. Ho can they be set always left to rigth ?  I tried  label.DirectionRightToLeft = false, no change. 
About label.Orientation, how can I set it ? Orientation.Horizontal comes from System.Windows.Forms and I didn't find a value such as Syncfusion.Windows.Forms.Diagram.Label.Orientation or Syncfusion.Windows.Forms.Diagram.Orientation 
 
In diagram control, the labels are rendered on the connectors from the tail to head endpoint direction by default. So we suggest you to use Label’s “Orientation”  property to set the orientation as “Horizontal”. Could you please let us know whether your requirement is achieved or not after applying the suggested changes?  
 
Please refer to the below code example: 
 
[C#] 
            Syncfusion.Windows.Forms.Diagram.Label lbl = new Syncfusion.Windows.Forms.Diagram.Label(); 
lbl.Orientation = LabelOrientation.Horizontal; 
 
 
Regards, 
 
Naganathan K G 
 



OL Olivier October 6, 2017 09:34 AM UTC

1) Position.MiddleLeft : It's better but text are placed as designed on the left of the arrow. I would like MiddleCenter but this option does not exist.

2) ok

3) LabelOrientation.Horizontal : In the case text is placed horizontaly as designed which is a workaround. It was good to be able to place text along a line connector as long as it is readable. Couldn't it be considered as a bug and be corrected by testing  XY coordinates for start and end points to detect that text should be flipped ?


Olivier




NG Naganathan Ganesh Babu Syncfusion Team October 9, 2017 06:08 AM UTC

Hi Olivier, 
 
Position.MiddleLeft : It's better but text are placed as designed on the left of the arrow. I would like MiddleCenter but this option does not exist. 
In Diagram control, the label positioned in center is based on the size of the connector by default and the Label’s “Position.Center” option is same as MiddleCenter. So we suggest you to use Label’s “Position.Custom” to set the label’s “OffsetX” and “OffsetY” is manually as per your requirement. please refer to the below code example. 
 
Code example: 
 
[C#] 
 
Syncfusion.Windows.Forms.Diagram.Label lbl = new Syncfusion.Windows.Forms.Diagram.Label(); 
lbl.Text = "First"; 
//Get the current position of the label 
PointF lblPt = lbl.GetPosition(); 
//Set the custom position manually as per your requirement  
lbl.Position = Position.Custom; 
lbl.OffsetX = 30; 
lbl.OffsetY = lblPt.Y; 
 
LabelOrientation.Horizontal : In the case text is placed horizontaly as designed which is a workaround. It was good to be able to place text along a line connector as long as it is readable. Couldn't it be considered as a bug and be corrected by testing  XY coordinates for start and end points to detect that text should be flipped ? 
We have created a new incident for this query. Please follow-up with that incident for furthers details.   
    
 

Regards, 
 
Naganathan K G 

  


Loader.
Live Chat Icon For mobile
Up arrow icon