RadDiagramShape Connectors always visible

5 posts, 0 answers
  1. Cezara
    Cezara avatar
    3 posts
    Member since:
    Aug 2017

    Posted 01 Nov 2017 Link to this post

    Hi, 

    I am creating some custom RadDiagramShapes, using Shape -> Create new custom shape. I have also added custom connectors and configured the LightVisualElement child to display some text. (as in attachement)

    Is there any way for these connectors to stay always visible in RadDiagram, even if shape is not selected?

    I have tried to override the UpdateVisualStates method from RadDiagramShape, using VisualStateManager.GoToState(), with no success. 

    I am using .NET Framework 4.5.2  and Telerik 2017.3.912.40

     

    Thanks!

  2.
  3. Hristo
    Admin
    Hristo avatar
    1522 posts

    Posted 01 Nov 2017 Link to this post

    Hi Cezara,

    Thank you for writing.

    Besides the UpdateVisualStyles method, you will also need to override the OnIsSelectedChanged in the custom shape`s class: 
    protected override void OnIsSelectedChanged(bool oldValue, bool newValue)
    {
        base.OnIsSelectedChanged(oldValue, newValue);
     
        foreach (RadElement connector in this.Connectors)
        {
            connector.Visibility = ElementVisibility.Visible;
        }
    }
     
    protected override void UpdateVisualStates()
    {
        foreach (RadElement connector in this.Connectors)
        {
            connector.Visibility = Telerik.WinControls.ElementVisibility.Visible;
        }
    }

    Alternatively, to the approach above you can set the Visibility property of the connectors to Visible and subscribe them to the RadPropertyChanging event and cancel it. This can happen in your form: 
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
     
        //Add shapes
     
        foreach (RadDiagramShapeBase el in this.radDiagram1.Items)
        {
            foreach (RadElement connector in el.Connectors)
            {
                connector.Visibility = ElementVisibility.Visible;
                connector.RadPropertyChanging += RadForm1_RadPropertyChanging;
            }
        }
    }
     
    private void RadForm1_RadPropertyChanging(object sender, RadPropertyChangingEventArgs args)
    {
        if (args.Property.Name == "Visibility")
        {
            args.Cancel = true;
        }
    }

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Cezara
    Cezara avatar
    3 posts
    Member since:
    Aug 2017

    Posted 01 Nov 2017 Link to this post

    Hi Hristo,

    Thank you very much for your answer!

    I think that the first solution is the one that suits me, because I use a RadDiagramToolbox to store shapes that can be dragged to radDiagram and connectors need to be displayed also for later added shapes.

    Still, when overriding the OnIsSelectedChanged and UpdateVisualStates methods as you mentioned above, the shapes display only one connector (see attachement1.png). 

    I am looking for a solution to permanently display all connectors for all shapes in diagram (see attachement2.png), as it happends when a shape is selected.

     

    Thank you,

    Cezara

     

  7. Hristo
    Admin
    Hristo avatar
    1522 posts

    Posted 02 Nov 2017 Link to this post

    Hi Cezara,

    Indeed although all of the connectors are visible they are painted on top of each other. The bounds of these elements are calculated differently when the shape is not selected. In order to display all of the connectors permanently, you will need to implement the ArrangeOverride method in the class of the custom shape:
    protected override System.Drawing.SizeF ArrangeOverride(System.Drawing.SizeF finalSize)
    {
        System.Drawing.SizeF sz = base.ArrangeOverride(finalSize);
        foreach (IConnector connector in this.Connectors)
        {
            RadElement connectorElement = (RadElement)connector;
            System.Drawing.SizeF size = connectorElement.DesiredSize;
            double x = connector.Offset.X * finalSize.Width - size.Width / 2;
            x = Math.Max(0, x);
            double y = connector.Offset.Y * finalSize.Height - size.Height / 2;
            y = Math.Max(0, y);
            connectorElement.Arrange(new System.Drawing.RectangleF((float)x, (float)y, size.Width, size.Height));
        }
     
        return sz;
    }

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8.
  9. Cezara
    Cezara avatar
    3 posts
    Member since:
    Aug 2017

    Posted 02 Nov 2017 Link to this post

    It works! Thank you so much!
Back to Top