This is a migrated thread and some comments may be shown as answers.

Double click to edit shape content in using MVVM

7 Answers 102 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 1
Veteran
Scott Waye asked on 17 Sep 2012, 09:22 PM
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

7 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 18 Sep 2012, 07:22 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 18 Sep 2012, 06:19 PM
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
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 21 Sep 2012, 06:27 AM
Hi , Have you had a chance to look at this?
0
Accepted
Petar Mladenov
Telerik team
answered on 21 Sep 2012, 06:37 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 23 Sep 2012, 06:06 PM
HI Petar,

Thanks that works well.

--
Scott
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 16 Oct 2012, 06:50 PM
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"/>
0
Petar Mladenov
Telerik team
answered on 19 Oct 2012, 03:33 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Diagram
Asked by
Scott Waye
Top achievements
Rank 1
Veteran
Answers by
Petar Mladenov
Telerik team
Scott Waye
Top achievements
Rank 1
Veteran
Share this question
or