Create UML table shape

[Bojan]

Hello,

We are using Telerik WinForms UI suite which includes following versions: 2014.3.1202.20, 2014.3.1202.40, 2014.3.1202.45

 I am interested if there is a way with Diagramming framework to create UML diagramming shapes - tables connected field-to-field, something similar to TableShape example you have for the WPF demo (attached image)

 

If there is a way to achieve this, could you please provide a small code example showing how to create table shape with some fields and connect tables?

 

Kind regards,

Bojan

[Dimitar]

Hi Bojan,

Thank you for writing.

The RadDiagram control was officially released in the Q3 2015 (version 2015.3 930). All the features that are required for creating such functionality are included in this version. You can view the currently available examples in our demo application (see attached image). The Organizational Chart example is close to what you are looking for.

I hope this will be useful.

 

Regards,
Dimitar
Telerik

[Bojan]

Dimitar,

 

Thank you - we are now evaluating the latest release of WF controls suite.

 However, I haven't managed to create TableShape with WinForms diagramming framework - would you care to provide a WPF TableShape equvalent built with WinForms diagramming framework (we are building WinForms application)?

 

Kind regards,

Bojan

[Dimitar]

Hello Bojan,

Thank you for writing back.

Please note that this is a complex example and recreating it for the WinForms platform can take a significant amount of time. This is why I want to ask you, to specify what exactly you want to achieve in this case? Which part of the example functionality you really need? 

For now I have prepared a small example which shows how you can create a custom shape. I have added RadGridView inside the shape because its built-in functionality can be really useful for this case. 

I hope this will be useful. I am looking forward to your reply.

Regards,
Dimitar
Telerik

[Bojan]

Dimitar,

​Thanks much for your assistance and sorry for the late replay.

I was able to pick up your example - very close to what we need. Just the couple of question more:

1. One thing I did not manage to achieve using example you provided is to add row-to-row links between tables. How would I use row from RadGridView and assign it as a source/destination for connector?

2. Is there a way to add an "diagram overview" control to the RadDiagram in WinForms? Like the one in WPF OrgChart example (please see attached image)

 

Kind regards,

Bojan

[Dimitar]

Hi Bojan,

Thank you for writing back.

1. Currently, you should add the new connectors to the Connectors and the Children collections of the shape. In addition, you can set the margin of the inner element. This way the connectors will be easily accessed:

public MyShape()
{
    var c = new RadDiagramConnector() { Name = "connector10", Offset = new Telerik.Windows.Diagrams.Core.Point(1, 0.65) };

    this.Connectors.Add(c);
    this.Children.Add(c);

    this.Shape = new RoundRectShape(0);
    Width = 200;
    Height = 150;
    Position = new Telerik.Windows.Diagrams.Core.Point(0, 0);

    StackLayoutElement el = new StackLayoutElement() { ShouldPaint = true };
    el.Margin = new System.Windows.Forms.Padding(3);
    el.Orientation = Orientation.Vertical;
    el.StretchHorizontally = true;
    el.StretchVertically = true;

    nameLabel = new RadLabelElement()
    {
        StretchVertically = false,
        Padding = new Padding(4)
    };
    nameLabel.LabelFill.Visibility = ElementVisibility.Visible;
    nameLabel.LabelFill.BackColor = System.Drawing.Color.CornflowerBlue;
    nameLabel.LabelFill.GradientStyle = GradientStyles.Solid;
    ((ImageAndTextLayoutPanel)nameLabel.Children[2]).TextAlignment = ContentAlignment.MiddleCenter;

    tableLayout = new RadGridView();

    RadHostItem item = new RadHostItem(tableLayout);
    tableLayout.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
    tableLayout.AutoGenerateColumns = false;
    tableLayout.Columns.Add(new GridViewTextBoxColumn("ColumnName"));
    tableLayout.Columns.Add(new GridViewTextBoxColumn("DataType"));
    tableLayout.AllowAddNewRow = false;
    tableLayout.EnableGrouping = false;
    tableLayout.ShowRowHeaderColumn = false;
    el.Children.Add(nameLabel);
    el.Children.Add(item);

    this.Children.Add( el);

}

2. I am not sure what you mean by "diagram overview" but the exact same example is available for the WinForms suite as well. The attached image shows where you can find it.

I hope this helps.

Regards,
Dimitar
Telerik

[Bojan]

WinForms OrgChart demo does not have "overview" control from the same WPF demo

 Please have a look at the attached image

 How to make this control with WinForms?

[Dimitar]

Hi Bojan,

Thank you for writing back.

This is a custom control and it is not available in the WinForms suite. Nevertheless, such control can be created by using the Telerik Presentation Framework. What you need to do is to add the required elements to the control and use the predefined layout panels to arrange them. Then you can change the zoom, and draw the selection rectangle in the image. I have attached a small sample to show you how this can be achieved. Detailed information about custom controls is available in the following articles:

• Getting Started
• Predefined Layout Panels
• LightVisualElement 
• RadTrackBarElement

I hope this helps.

Regards,
Dimitar
Telerik