Double click to edit shape content in using MVVM

8 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 17 Sep 2012 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 18 Sep 2012 Link to this post

    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.

  3. DevCraft banner
  4. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 18 Sep 2012 Link to this post

    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
  5. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 21 Sep 2012 Link to this post

    Hi , Have you had a chance to look at this?
  6. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 21 Sep 2012 Link to this post

    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.

  7. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 23 Sep 2012 Link to this post

    HI Petar,

    Thanks that works well.

    --
    Scott
  8. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 16 Oct 2012 Link to this post

    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"/>
  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Oct 2012 Link to this post

    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.

Back to Top
DevCraft banner