Node text to be focused when editable

[Aakansha]

I am using the mind map of telerik.

I want to add this functionality in the node. The ability that when a node is double clicked it selects all the text in the node and allows the user to start typing and have it replace the text. This will replace the current functionality of having to double click on a node then clicking the textbox to be able to change the text. 

[Martin Ivanov]

Hi Aakansha,

Depending on your scenario you can use different approaches for achieving your requirement. For example if you use the MVVM pattern you can define a EditTemplate for the shapes and use an attached property to focus and select the text in the TextBox that is used for editing.

Here is an example in code:

<Style TargetType="telerik:RadDiagramShape">
    <Setter Property="EditTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBox Text="{Binding Content}" local:ElementUtilities.IsTextSelected="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadDiagramShape}, Path=IsInEditMode}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

.

public class ElementUtilities
{
    public static bool GetIsTextSelected(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsTextSelectedProperty);
    }

    public static void SetIsTextSelected(DependencyObject obj, bool value)
    {
        obj.SetValue(IsTextSelectedProperty, value);
    }

    public static readonly DependencyProperty IsTextSelectedProperty =
        DependencyProperty.RegisterAttached("IsTextSelected", typeof(bool), typeof(ElementUtilities), new PropertyMetadata(false, OnIsTextSelectedPropertyChanged));

    private static void OnIsTextSelectedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = d as TextBox;
        var isSelected = (bool)e.NewValue;
        if (isSelected)
        {
            Dispatcher.CurrentDispatcher.BeginInvoke(new Action( () => {
                element.Focus();
                element.SelectAll();
            }), DispatcherPriority.Loaded);
        }
    }
}

If you don't use an MVVM approach you can subscribe for the BeginEdit event of the shapes and inside the event handler you can get the default TextBox that is used for editing and select its text.

this.AddHandler(RadDiagramItem.BeginEditEvent, new RadRoutedEventHandler(ShapesBeginEdit));
.....
private void ShapesBeginEdit(object sender, RadRoutedEventArgs e)
{
    var shape = e.OriginalSource as RadDiagramShape;
    var editBox = shape.ChildrenOfType<TextBox>().FirstOrDefault(x => x.Name == "EditTextBox");
    editBox.SelectAll();
}

I hope this helps.

Regards,
Martin
Telerik

 

 

[Aakansha]

Hi Martin,

Can you post sample project for the 2nd approach if possible? 

[Martin Ivanov]

Hello Aakansha,

I attached a project demonstrating the second approach. Please let me know if it works for you.

Regards,
Martin
Telerik

 

 

[Aakansha]

Thanks Martin for the project. I ended up using 1st approach. I am using TextBox in the wpf. I am also adding the code below which I am using.

<TextBox Name="midNode"  Grid.Column="2" Margin="0 5 5 5" HorizontalAlignment="Left" VerticalAlignment="Center"                             Text="{Binding Text}" MouseDoubleClick="midNode_MouseDoubleClick" Background="Transparent" BorderThickness="0" KeyDown="TextBox_KeyDown" Visibility="{Binding Text, Converter={StaticResource stringToVisibilityConverter}}"                                  TextWrapping="Wrap" MaxWidth="200" >
 </TextBox>

private void midNode_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
           e.Handled = true;
           (sender as TextBox).SelectAll();
}

private void TextBox_KeyDown(object sender, KeyEventArgs e)
{
           if (e.Key == Key.Enter)
           {
               e.Handled = true;
               KeyEventArgs eInsertBack = new KeyEventArgs(Keyboard.PrimaryDevice, Keyboard.PrimaryDevice.ActiveSource, 0, Key.Tab);
               eInsertBack.RoutedEvent = UIElement.KeyDownEvent;
               InputManager.Current.ProcessInput(eInsertBack);
           }
       }

Now this code works for selecting all the text of node on double click. KeyDown also works for removing focus from node when user press enters. But before, dragging used to work even over the text of the node. Now it works only on the boundary.  I have attached an image also. Can you help me fix this. Basically single click and hover should allow me to drag it.

Below is the code which was before. It was TextBlock.

<TextBlock Name="abc" Grid.Column="2" Margin="0 5 5 5" VerticalAlignment="Center" Text="{Binding Text}"                             Visibility="{Binding Text, Converter={StaticResource stringToVisibilityConverter}}" TextWrapping="Wrap"                                    MaxWidth="200"  />

[Martin Ivanov]

Hi Aakansha,

I cannot find the attached image. Can you reattach it and send it over again?

Let me start with an explanation on that how the shape's edit mode is structured. The template of RadDiagramShape contains an TextBox element with x:Name set to "EditTextBox" which is used when the diagram is populated directly with RadDiagramShapes (its GraphSource is not set). On the other hand, the template also contains an collapsed ContentPresenter which is placed over the default TextBox. When you define an EditTemplate for the shape, the ContentPresenter becomes visible and displays the elements in the EditTemplate. This hides the default TextBox. Furthermore, the diagram implements custom functionality for the the default edit box element that might not work out-of-the-box when the EditTemplate is used.

I am not sure that I completely understand your concern. Can you please elaborate more on your scenario by answering the following questions:

• Where you define the TextBox element? Is it in the EditTemplate?
• Can you tell me what exactly you want to drag? 
• Can you send me a snapshots of the previous (the expected) and the current (actual) result?

This will allow me to better understand your case and assist you further.

Thank you for any help you can provide.

Regards,
Martin
Telerik