Double click to edit shape content in using MVVM

[Scott Waye]

Hi,

Taking this example http://www.telerik.com/community/forums/silverlight/diagram/implementing-drag-drop-in-mvvm.aspx, how do you enable the double click on shape functionality to bring up the text box to edit the content?

--
Scott

[Petar Mladenov]

Hello Scott,

 DoubleClicking a Shape automatically turns on the edit mode unless the IsEditable property of the RadDaigram is set to False. Please check out this help article for more information. It describes how you can define ItemEditTemplate which is useful in custom databinding scenarios.

Regards,
Petar Mladenov
the Telerik team

[Scott Waye]

Hi Petar,

That doesn't work for me with the referenced solution.  Note that it has the GraphSource set to an ObservableGraphSource which is different to the online demos.  Do you want me to raise a support ticket so I can attach the solution at http://www.telerik.com/community/forums/silverlight/diagram/implementing-drag-drop-in-mvvm.aspx ?
--
Scott

[Scott Waye]

Hi , Have you had a chance to look at this?

[Petar Mladenov]

Hello Scott,

 We can use the project from the mentioned thread and discuss it here. Basically , it has some bugs in it, for example the CreateNode method it used to be:

public override object CreateNode(Telerik.Windows.Diagrams.Core.IShape shape)
    {
        var customShape = shape as CustomShape;
        if (shape!= null)

but I guess it must be something like:

public override object CreateNode(Telerik.Windows.Diagrams.Core.IShape shape)
        {
            var customShape = shape as CustomShape;
            if (customShape != null)
                return new DiagramTask() { Task = customShape.Task };
            else
                return new DiagramTask() {Task = "Sample Task"};
        }

This will create a ViewModel for every kind of shape dropped from the RAdToolBox - RadDiagramShape or custom shape. And now, when we suitable ViewModels for every shape, we have to define ShapeTemplate and Shape EditTemplate like so:

<DataTemplate x:Key="edittemplate">
                <TextBox Text="{Binding Task, Mode=TwoWay}" />
            </DataTemplate>
            <DataTemplate x:Key="itemtemplate">
                <TextBlock Text="{Binding Task}" />
            </DataTemplate>
            <telerik:HierarchicalDataTemplate x:Key="itemTemplate" ItemsSource="{Binding Items}"
                    ItemTemplate="{StaticResource ToolboxItemTemplate}">
                <TextBlock Text="{Binding Header}" Name="Test" />
            </telerik:HierarchicalDataTemplate>
        </Grid.Resources>
        <telerik:RadDiagram ShapeTemplate="{StaticResource itemtemplate}" ShapeEditTemplate="{StaticResource edittemplate}" x:Name="diagram" IsEditable="True"/>

Now the double click will force the edit mode. Please check out the attached modified solution.



Regards,
Petar Mladenov
the Telerik team

[Scott Waye]

HI Petar,

Thanks that works well.

--
Scott

[Scott Waye]

Hi,

I've tried to extend the solution to support editing the connection content but it doesn't work as I would expect.  You can double click to get the edit template and enter some text, but after the edit is finished the ConnectionTemplate is blank.  I've used the solution you attached higher up and modified this section of MainPage.xaml:

    <DataTemplate x:Key="connectionedittemplate">
        <TextBox Text="{Binding Content, Mode=TwoWay}" />
    </DataTemplate>
    <DataTemplate x:Key="connectionitemtemplate">
        <TextBlock Text="{Binding Content}" />
    </DataTemplate>
    <telerik:HierarchicalDataTemplate x:Key="itemTemplate" ItemsSource="{Binding Items}"
            ItemTemplate="{StaticResource ToolboxItemTemplate}">
        <TextBlock Text="{Binding Header}" Name="Test" />
    </telerik:HierarchicalDataTemplate>
</Grid.Resources>
<telerik:RadDiagram ShapeTemplate="{StaticResource itemtemplate}" ShapeEditTemplate="{StaticResource edittemplate}"
                    ConnectionEditTemplate="{StaticResource connectionedittemplate}" ConnectionTemplate="{StaticResource connectionitemtemplate}"
                    x:Name="diagram" IsEditable="True"/>

[Petar Mladenov]

Hi Scott,

 We are aware of this issue in Q2 and the good news is that it is resolved in the Q3 we've just released this week. We tried your extended code with the project in this thread and our new binaries - everything worked correctly.
On a side note, you can take a quick look at our new features - Drawing Tools, GlidingConnectors, Export To HTML, VisualContainers. 

Regards,
Petar Mladenov
the Telerik team