Raddiagram

1 Answer 117 Views
Diagram, DiagramRibbonBar, DiagramToolBox
Moe
Top achievements
Rank 1
Iron
Iron
Veteran
Moe asked on 21 Oct 2021, 05:02 AM

Hi ,

 

I add Shape page. In page , can I add shape similar like pic. If I choose the triangle shape and shareholder can change triangle shape? How to write it . Please let me know. If that way can't do, how to do other way. I want to change shape because user want to change any of shapes.

 

 

Thanks,

Moe

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Oct 2021, 10:40 AM
Hello, Moe,

The SettingsPane control is not designed to offer customizing the shape of a RadDiagramShape. I would recommend you to have a look at our Demo application >> Diagram >> First Look example which is quite useful for getting started experience. Try to select a shape and use the RadPropertyGrid on the right side to change the Shape. To access the Live Demo simply click on the Windows Start button and type WinForms Demo. If you are not able to find the Live Demos using that approach you can also download it directly from here.

The RadPropertyGrid.SelectObject is set to the DiagramElement.SelectedItem. This gives you access to all properties of the RadDiagramShape and you can change its shape as well.
 
I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Moe
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 22 Oct 2021, 03:51 AM

HI Dess,

 

I try in demo application but no change the shape.

 

Thanks,

Moe

Moe
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 22 Oct 2021, 06:56 AM

HI Dess,

 

Can you write to me similar code. My side after run program already have shape after want to change the shape. How to write it? Your demo can't do it where can I change? I try it but no changes anything.

 

Thanks,

Moe

Dess | Tech Support Engineer, Principal
Telerik team
commented on 26 Oct 2021, 10:35 AM

Hello, Moe,

I have prepared a sample project that uses RadPropertyGrid together with RadDiagram in order to change the shape of a RadDiagramShape object. The attached gif file illustrates what you need to perform in order to change the shape. Please give the sample project a try and see how it works for your scenario. 

Should you have further questions please let me know.
Moe
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 29 Oct 2021, 04:20 AM

Hi Dess,

 

Can I know if I want to show only shape menu in RadPropertyGrid , how to do it? I don't want to show other things? Can do?

 

Thanks,

Moe

Dess | Tech Support Engineer, Principal
Telerik team
commented on 29 Oct 2021, 01:41 PM

Hello, Moe,

Instead of setting the RadProperyGrid.SelectedObject property to the currently selected RadDiagramShape, you can add just a single property item for managing the ElementShape:
        private void radDiagram1_SelectionChanged(object sender, EventArgs e)
        {
            PropertyStoreItem shapeItem = new PropertyStoreItem(typeof(ElementShape), "Shape", 1);
            RadPropertyStore store = new RadPropertyStore();
            store.Add(shapeItem); 
            this.radPropertyGrid1.SelectedObject = store;
            this.radPropertyGrid1.PropertyValueChanged -= RadPropertyGrid1_PropertyValueChanged; 
            this.radPropertyGrid1.PropertyValueChanged += RadPropertyGrid1_PropertyValueChanged;
        }

        private void RadPropertyGrid1_PropertyValueChanged(object sender, PropertyGridItemValueChangedEventArgs e)
        {
            if (this.radDiagram1.SelectedItem!=null)
            {
                RadDiagramShape selectedShape = this.radDiagram1.SelectedItem as RadDiagramShape;
                if (selectedShape!=null)
                {
                    selectedShape.Shape = ((PropertyGridItem)e.Item).Value as ElementShape;
                }
            }
        }

 

Moe
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 09 Nov 2021, 07:10 AM

HI Dess,

 

I have one question when I add textbox from RadDiagramRibbonBar1 after added my diagram direction is changed. Please read my coding and my pic. Please tell me how to write after I added textbox didn't change position.

 

Coding

-------------



Imports Telerik.WinControls
Imports Telerik.WinControls.UI


Public Class Form1
    Property RadDiagram As String = "radDiagram"
    Const EntityWidth As Integer = 250
    Const EntityHeight As Integer = 70
    Property EntityID As Integer = 0
    Property EntityName As String = ""
    Property EntityCategoryName As String = ""
    Dim radDiagramShapeMainEntity As RadDiagramShape
    Property radDiagram1 As UI.RadDiagram
    Property radDiagram2 As UI.RadDiagram
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        EntityID = 898989
        EntityName = "Man Testing Pte Ltd"
        AddNewRadDiagram()

        Dim radDiagramShapeRightEntity As New RadDiagramShape
        Dim radDiagramConnection1 As New RadDiagramConnection
        Dim Shape = radDiagram1.Shapes.Where(Function(s) s.Name = RadDiagram & "898989").FirstOrDefault()
        SetRadDiagramShape(radDiagramShapeRightEntity, "testing1", "Director" & vbCrLf & "ttttt" & vbCrLf & "n", 1111, False)
        Dim shapeParent As RadDiagramShape = CType(Shape, RadDiagramShape)
        SetRadDiagramConnection(radDiagramConnection1, shapeParent, radDiagramShapeRightEntity, "Bottom", "Top")


        LoadDiagramStandardSettings()
    End Sub
    Private Sub AddNewRadDiagram()
        Try
            radDiagram1 = New UI.RadDiagram

            Panel1.Controls.Add(radDiagram1)

            radDiagram1.Dock = DockStyle.Fill


            With radDiagram1
                .AllowCopy = False
                .AllowCut = False
                .AllowDelete = True
                .AllowDrop = False
                .AllowPaste = False
                .IsBackgroundSurfaceVisible = False
                .IsConnectorsManipulationEnabled = False
                .IsDraggingEnabled = True
                .IsEditable = True
                .IsInformationAdornerVisible = False
                .IsPanEnabled = False
                .IsResizingEnabled = True
                .IsRotationEnabled = False
                .IsSettingsPaneEnabled = True
                .IsZoomEnabled = True
                .ConnectionBridge = Telerik.Windows.Diagrams.Core.BridgeType.None
                .ActiveTool = Telerik.Windows.Diagrams.Core.MouseTool.PanTool
                .AutoLayout = True
            End With

            LoadMainEntity()
            RadDiagramRibbonBar1.AssociatedDiagram = radDiagram1
            RadPropertyGrid1.ToolbarVisible = True
            RadPropertyGrid1.PropertyGridElement.Children(1).Children(0).Children(0).ElementTree.ThemeName = "ddd"

            AddHandler radDiagram1.SelectionChanged, AddressOf radDiagram1_SelectionChanged
            '     AddHandler radDiagram1.MouseClick, AddressOf radDiagram1_MOuseClick

        Catch ex As Exception


            Throw
        End Try
    End Sub
    Private Sub radDiagram1_SelectionChanged(sender As Object, e As EventArgs)

        ' RadPropertyGrid1.SelectedObject = radDiagram1.SelectedItem
        Dim shapeItem As PropertyStoreItem = New PropertyStoreItem(GetType(ElementShape), "Shape", 1)
        Dim store As RadPropertyStore = New RadPropertyStore()
        store.Add(shapeItem)
        RadPropertyGrid1.SelectedObject = store
        RemoveHandler RadPropertyGrid1.PropertyValueChanged, AddressOf RadPropertyGrid1_PropertyValueChanged
        AddHandler RadPropertyGrid1.PropertyValueChanged, AddressOf RadPropertyGrid1_PropertyValueChanged


    End Sub

    Private Sub RadPropertyGrid1_PropertyValueChanged(ByVal sender As Object, ByVal e As PropertyGridItemValueChangedEventArgs)
        If Me.radDiagram1.SelectedItem IsNot Nothing Then
            Dim selectedShape As RadDiagramShape = TryCast(Me.radDiagram1.SelectedItem, RadDiagramShape)

            If selectedShape IsNot Nothing Then
                selectedShape.Shape = TryCast((CType(e.Item, PropertyGridItem)).Value, ElementShape)
            End If
        End If
    End Sub
    Private Sub LoadMainEntity()
        Try
            radDiagramShapeMainEntity = New RadDiagramShape() With {
               .Name = RadDiagram & EntityID.ToString,
               .Text = EntityName,
               .Tag = EntityID,
               .ElementShape = New RoundRectShape(),
               .BackColor = System.Drawing.Color.White,
               .DrawBorder = True,
               .Size = New Size(EntityWidth, EntityHeight)
           }
            radDiagram1.Items.Add(radDiagramShapeMainEntity)

        Catch ex As Exception


            Throw
        End Try
    End Sub

    Private Sub SetRadDiagramShape(ByRef radDiagramShape1 As RadDiagramShape, radDiagramShapeName As String, entityName As String, entityID As Nullable(Of Integer), relationshipIsActive As Boolean)
        Try
            radDiagramShape1 = New RadDiagramShape() With {
                          .Name = radDiagramShapeName,
                          .Text = entityName,
                          .Tag = entityID,
                          .ElementShape = New RoundRectShape(),
                          .BackColor = System.Drawing.Color.White,
                          .BorderBrush = New SolidBrush(System.Drawing.Color.Black),
                          .DrawBorder = True,
                          .Size = New Size(EntityWidth, EntityHeight)
                      }

            If Not relationshipIsActive Then
                radDiagramShape1.BackColor = System.Drawing.Color.Gainsboro
            End If

            radDiagram1.Items.Add(radDiagramShape1)

        Catch ex As Exception


            Throw
        End Try
    End Sub

    Private Sub SetRadDiagramConnection(ByRef radDiagramConnection1 As RadDiagramConnection, source As RadDiagramShape, target As RadDiagramShape, sourceConnectorPosition As String, targetConnectorPosition As String)
        Try
            radDiagramConnection1 = New RadDiagramConnection() With {
                        .Source = source,
                        .Target = target,
                        .TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1,
                        .SourceConnectorPosition = sourceConnectorPosition,
                        .TargetConnectorPosition = targetConnectorPosition,
                        .BackColor = System.Drawing.Color.Black
                    }
            radDiagram1.Items.Add(radDiagramConnection1)

        Catch ex As Exception


            Throw
        End Try
    End Sub



    Private Sub LoadDiagramStandardSettings()
        Try
            radDiagram1.RouteConnections = False

            Dim treeLayoutSettings1 As New Telerik.Windows.Diagrams.Core.TreeLayoutSettings
            treeLayoutSettings1.AnimateTransitions = True
            treeLayoutSettings1.HorizontalSeparation = 30
            treeLayoutSettings1.VerticalSeparation = 100
            treeLayoutSettings1.TreeLayoutType = Telerik.Windows.Diagrams.Core.TreeLayoutType.TreeDown
            treeLayoutSettings1.Roots.Add(radDiagramShapeMainEntity)
            radDiagram1.SetLayout(Telerik.Windows.Diagrams.Core.LayoutType.Tree, treeLayoutSettings1)

            Dim aStarRouter1 As New Telerik.Windows.Diagrams.Core.AStarRouter(radDiagram1.DiagramElement)
            radDiagram1.RoutingService.Router = aStarRouter1

            radDiagram1.RouteConnections = True

            radDiagram1.Focus()

        Catch ex As Exception

            Throw
        End Try
    End Sub
End Class

----------------------------------------------------------------

 

 

 

Dess | Tech Support Engineer, Principal
Telerik team
commented on 11 Nov 2021, 01:23 PM

Hello, Moe,

Following the provided code snippet, I have prepared a sample project to test the behavior locally. I was able to replicate the orientation changes after enabling the text tool (see the attached gif file).

The shapes repositioning comes from the applied TreeLayoutSettings and enabled RouteConnections. Once you call the SetLayout method, the shapes will be re-positioned according to the applied layout. However, this is a one time operation. You call the method, the algorithm calculates the most appropriate positions for the shapes. When you add a new shape via the Text tool, you can call the LoadDiagramStandardSettings method again and shapes position will be adjusted according to the applied algorithm: 
    Private Sub radDiagram_ItemsChanged(sender As Object, e As UI.Diagrams.DiagramItemsChangedEventArgs)
        If e.Action = Specialized.NotifyCollectionChangedAction.Add Then 
            LoadDiagramStandardSettings()
        End If 
    End Sub
AddHandler Me.radDiagram1.ItemsChanged, AddressOf radDiagram_ItemsChanged
I hope this information helps. If you need any further assistance please don't hesitate to contact me. 
Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Moe
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or