Need help to create DataTable Diagram

[nicolasf]

i'm discovering the Telerik Diagram framework to create a datatable diagram tool.

I would like to add an "entity" who contain 2 lists : dataIn and dataOut.

Each element in dataIn/dataOut has 2 connectors (1 for input, 1 for output)

Rules :

- dataIn ouput connector (green in capture) can connect only to dataOut input connector (green in capture) in the current entity

- dataOut ouput connector (blue in capture) can connect only to dataIn input connector (red in captire) in other entity



what should i use to create an entity : ContainerShape ? Could i define 2 items list ? or i should use 2 ContainerShape in 1 user control ?

how can i block connector between dataIn ouput and dataOut input ?

how can i personnalize connector shape ?

If you have some examples ? 

thanks for your time and your response

Nicolas

[Dinko | Tech Support Engineer]

Hello ,

Thank you for contacting us.

It will be better to use a one ContainerShape and position two columns of shape inside the container. This functionality is not supported from the RadDiagram out of the box. To order the children of RadDiagramContainerShape as in a Grid with two columns you can write custom code. Basically, you can create a custom container shape and override its OnItemsCollectionChanged() method. The method will be called each time an item is added or removed from the container. There you can call the base logic and after this re-position the shapes so that they are ordered as you desire. A similar approach is demonstrated in the TableShape demo mentioned below.

protected override void OnItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    base.OnItemsCollectionChanged(sender, e);
    if (e.Action == NotifyCollectionChangedAction.Add)
    {
        // Add the new items at the corresponding position.
    }
    else if(e.Action == NotifyCollectionChangedAction.Remove)
    {
        // Remove the old items from the container and reposition the other items.
    }
}

For your second question about "block connector", we are assuming that you want to restrict the connectors from the shape from creating or connecting a connection. If this is the case you can subscribe to the ConnectionManipulationStarted and ConnectionManipulationCompleted of the RadDiagram control and handles these events if you don't want to create/connect connection. You can read more about these events in the Connection Manipulation Events section in the Diagram Events help article.

For creating a custom style for the connector shape you use the ConnectionStyle property of the RadDiagram. You can take a look at the Styling and Style Selectors help article in our documentation which describes how you can customize the default look of the RadDiagram items.

You can take a look at the TableShape and Swimlane demo in the RadDiagram section in our WPF Controls Demo desktop application.

Hope this information is helpful. If you have any more questions, please don't hesitate to contact us again.

Regards,
Dinko
Progress Telerik

[nicolasf]

Thanks for your help, i've successfully created an Entity Container and added  DataShapes in 2 columns manually (i need to specify position manually for each shape).

Can i define container's template to use a grid with 2 columns (to be "responsive") and add input data in the first column and output data in second column ? Which template property should i specify ?

Thanks,

Nicolas

 

[Dinko | Tech Support Engineer]

Hello Nicolas,

You can use the ContainerShapeStyle property of the RadDiagram. In the custom style, you can specify a custom template with a grid inside. You can take a look at the Styling and Style Selectors help article in our documentation which describes how you can customize the default look of the diagram items.

Regards,
Dinko
Progress Telerik

[nicolasf]

Thanks for your last answer.

I tried to define custom template but if i change template i need to redefine all interaction/action with container (resize, 

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate>
            <Grid Background="DimGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0">
                    <TextBlock x:Name="EntityContent" Text="test" Width="250" Height="35" Foreground="White" />
                </StackPanel>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40*" />
                        <ColumnDefinition Width="20*" />
                        <ColumnDefinition Width="40*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Vertical" x:Name="EntityDataIn" Grid.Column="0"></StackPanel>
                    <StackPanel Orientation="Vertical" x:Name="EntityDataOut" Grid.Column="2"></StackPanel>
                </Grid>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

 

I use MVVM pattern to create my app but i dont understand how to intercept event in MVVM with parameters :

None MVVM :

public EditorViewModel(RadDiagram inDiagram)
        {
            currentDiagram = inDiagram;
            currentDiagram.SelectionChanged += CurrentDiagram_SelectionChanged;
            currentDiagram.ItemsChanging += CurrentDiagramOnItemsChanging;
        }

        private void CurrentDiagramOnItemsChanging(object sender, DiagramItemsChangingEventArgs diagramItemsChangingEventArgs)
        {
            if (diagramItemsChangingEventArgs.Action == NotifyCollectionChangedAction.Remove)
            {
                foreach (var conn in this.listConnections)
                {
                    currentDiagram.RemoveConnection(conn);
                }
            }
        }

 

With MVVM (i dont know how interception Action) :

<i:Interaction.Triggers>
                <i:EventTrigger EventName="ItemsChanging" >
                    <i:InvokeCommandAction Command="{Binding ItemsChangingCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>

private RelayCommand itemsChangingCommand;

        public ICommand ItemsChangingCommand
        {
            get
            {
                if (itemsChangingCommand == null)
                {
                    itemsChangingCommand = new RelayCommand(param => ItemsChanging());
                }

                return itemsChangingCommand;
            }
        }

        private void ItemsChanging(object sender = null, DiagramItemsChangedEventArgs e = null)
        {
        }

But in may ItemsChaging, e has null value

Thanks for your help !

 

[Dinko | Tech Support Engineer]

Hi Nicolas,

To bind an event to a command from your ViewModel you can use EventToCommandBehavior. You can take a look at the EventToCommandBehavior help article in our documentation where this behavior is further described. 

Regards,
Dinko
Progress Telerik

[nicolasf]

Thanks !!

 

That's working !