[Solved] Edit mode of RadTreeViewItem and lost focus.

[Oded]

Hi,
I created a simple application (runs out of browser) to show RadTreeView with ability to change node name. A simple click on RadTreeViewItem should select node and the second click on same node should enter node name to edit mode. It works perfect! But... after it I created another application containing a simple button only. And this button should launch the first application with RadTreeView. And ... "something happens" - the selection works as well and edit mode is entered but after it "something" steals focus and edit mode is finished exactly after beginning. How this problem could be resolved?
A code is following:

RafTreeView application

A code behind of View - RadTreeViewDemo.xaml.cs :
public partial class RadTreeViewDemo : UserControl
{
    public RadTreeViewDemo(TreeViewModel viewModel)
    {
        InitializeComponent();
        DataContext = viewModel;
    }

    private Scenario selectedItem;

    private void ListTreeView_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if ( e.OriginalSource is TextBlock )
        {
            if ( ( e.OriginalSource as TextBlock ).DataContext is Scenario )
            {
                Scenario newSelectedItem = ( e.OriginalSource as TextBlock ).DataContext as Scenario;
                if ( this.selectedItem != newSelectedItem )
                {
                    if ( this.selectedItem != null )
                    {
                        this.selectedItem.IsEditable = false;
                    }
                    this.selectedItem = newSelectedItem;
                }
                else
                {
                    this.selectedItem.IsEditable = true;
                }
             }
        }
    }
}

A View - RadTreeViewDemo.xaml :
<UserControl x:Class="RadControlsSilverlightApp1.RadTreeViewDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
        xmlns:Application="clr-namespace:RadControlsSilverlightApp1"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <ResourceDictionary>

            <Style x:Key="DefaultRadTreeViewStyle" TargetType="telerik:RadTreeView">
                <Setter Property="telerik:AnimationManager.AnimationSelector">
                    <Setter.Value>
                        <telerik:AnimationSelector>
                            <telerik:TreeViewExpandCollapseAnimation AnimationName="Expand" Direction="In"/>
                            <telerik:TreeViewExpandCollapseAnimation AnimationName="Collapse" Direction="Out"/>
                        </telerik:AnimationSelector>
                    </Setter.Value>
                </Setter>
                <Setter Property="SelectionMode" Value="Single"/>
                <Setter Property="ItemEditTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBox/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadTreeView">
                            <Grid x:Name="RootElement">
                                <Border BorderBrush="Black"  BorderThickness="1" Background="Blue">
                                    <Grid>
                                        <ScrollViewer x:Name="ScrollViewer">
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                        <Grid x:Name="DragBetweenItemsFeedback" HorizontalAlignment="Left" Height="8" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="Top">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="8"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Ellipse HorizontalAlignment="Left" Height="8" Stroke="{StaticResource DragBetweenItemsFeedback_BackgroundBrush}" StrokeThickness="2" VerticalAlignment="Center" Width="8"/>
                                            <Rectangle Grid.Column="1" Fill="{StaticResource DragBetweenItemsFeedback_BackgroundBrush}" Height="2" Margin="-2,3,0,0" RadiusY="2" RadiusX="2" VerticalAlignment="Top"/>
                                        </Grid>
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <telerik:ContainerBindingCollection x:Key="TreeViewItemContainerBinding">
                <telerik:ContainerBinding PropertyName="IsInEditMode" Binding="{Binding IsEditable, Mode=TwoWay}"/>
                <telerik:ContainerBinding PropertyName="IsExpanded" Binding="{Binding IsExpanded, Mode=TwoWay}" />
            </telerik:ContainerBindingCollection>

            <telerik:HierarchicalDataTemplate x:Key="ScenarioDefinitionItemTemplate"
                                            telerik:ContainerBinding.ContainerBindings="{StaticResource TreeViewItemContainerBinding}"
                                               >

               <StackPanel Orientation="Horizontal"
                            >

                    <TextBlock x:Name="Title"
                               Text="{Binding Name, Mode=TwoWay}"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Width="30"
                               TextTrimming="WordEllipsis"
                               Margin="5,0,0,0"
                        >

                    </TextBlock>

                </StackPanel>

            </telerik:HierarchicalDataTemplate>

            <!-- TreeView Common Style -->
            <Style x:Key="CommonInputFilesTreeViewStyle" TargetType="telerik:RadTreeView" BasedOn="{StaticResource DefaultRadTreeViewStyle}">
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="Background" Value="DarkGrey"/>
                <Setter Property="SelectionMode" Value="Extended"/>
                <Setter Property="IsDragDropEnabled" Value="True"/>
                <Setter Property="ItemsIndent" Value="20"/>
            </Style>

            <DataTemplate x:Key="ScenarioPathItemEditTemplate">
                <TextBox Text="{Binding Name, Mode=TwoWay}"
                         FontFamily="Arial"
                         FontSize="10"
                         />
            </DataTemplate>

        </ResourceDictionary>
    </UserControl.Resources>


    <Grid x:Name="LayoutRoot" Background="Azure">
        <telerik:RadTreeView x:Name="ListTreeView" Background="AliceBlue"
                             ItemsSource="{Binding ScenarioDefinitionList, Mode=TwoWay}"
                             ItemTemplate="{StaticResource ScenarioDefinitionItemTemplate}"
                             SelectedItem="{Binding CurrentScenario, Mode=TwoWay}"
                             SelectionMode="Single"
                             ItemEditTemplate="{StaticResource ScenarioPathItemEditTemplate}"
                              IsEditable="True"
                             MouseLeftButtonUp="ListTreeView_MouseLeftButtonUp"
                            >

        </telerik:RadTreeView>

    </Grid>
</UserControl>

A View Model TreeViewModel.cs:
public class TreeViewModel : INotifyPropertyChanged
{
    public TreeViewModel()
    {
        ScenarioDefinitionList = new ObservableCollection<Scenario>()
        {
            new Scenario("first"),
            new Scenario("second"),
            new Scenario("third"),
        };
 
        CurrentScenario = ScenarioDefinitionList[0];
    }
 
    private ObservableCollection<Scenario> scenarioDefinitionList;
    public ObservableCollection<Scenario> ScenarioDefinitionList
    {
        get
        { return this.scenarioDefinitionList; }
        set
        {
            this.scenarioDefinitionList = value;
            RaisePropertyChanged( () => ScenarioDefinitionList );
        }
    }
 
    private Scenario currentScenario { get; set; }
    public Scenario CurrentScenario
    {
        get
        { return this.currentScenario; }
        set
        {
            this.currentScenario = value;
            RaisePropertyChanged( () => CurrentScenario );
        }
    }
 
    #region INotifyPropertyChanged implementation
 
    protected void RaisePropertyChanged<T>(Expression<Func<T>> lambda)
    {
        var name = PropertySupport.ExtractPropertyName<T>( lambda );
        NotifyPropertyChanged( name );
    }
 
    public void NotifyPropertyChanged(string propertyName)
    {
        var handler = this.PropertyChanged;
        if ( handler != null )
            handler( this, new PropertyChangedEventArgs( propertyName ) );
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    #endregion
}

An entity - Scenario 
public class Scenario : INotifyPropertyChanged
{
    public Scenario(string name)
    {
        this.Name = name;
    }
 
    private bool isEditable;
    public bool IsEditable
    {
        get { return isEditable; }
        set { isEditable = value;
        RaisePropertyChanged( () => IsEditable );
        }
    }
 
 
    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            RaisePropertyChanged( () => Name );
        }
    }
 
    #region INotifyPropertyChanged implementation
 
    protected void RaisePropertyChanged<T>(Expression<Func<T>> lambda)
    {
        var name = PropertySupport.ExtractPropertyName<T>( lambda );
        NotifyPropertyChanged( name );
    }
 
    public void NotifyPropertyChanged(string propertyName)
    {
        var handler = this.PropertyChanged;
        if ( handler != null )
            handler( this, new PropertyChangedEventArgs( propertyName ) );
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    #endregion
}

And the second application (launcher) - xaml:
<UserControl x:Class="SilverlightApplication9.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Run" Height="23" HorizontalAlignment="Left" Margin="80,49,0,0" Name="button1" VerticalAlignment="Top" Width="75"
		   Click="button1_Click" />
    </Grid>
</UserControl>

and behind code - xaml.cs:
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        Window window = new Window();
        TreeViewModel viewModel = new TreeViewModel();
        Application.Current.MainWindow.Dispatcher.BeginInvoke( () =>
        {
            RadTreeViewDemo scenarioBuilderMainView = new RadTreeViewDemo( viewModel );
            window.Content = scenarioBuilderMainView;
        } );
        window.Width = 1097;
        window.Height = 700;
        window.Left = ( Application.Current.Host.Content.ActualWidth - window.Width ) / 2;
        window.Top = ( Application.Current.Host.Content.ActualHeight - window.Height ) / 2;
        window.Show();
    }
}

I tried it with behaviors, triggers, event handlers in code behind (as in example) and all are with same result.
Could somebody advice something?

[Pavel R. Pavlov]

Hi Oded,

Thank you for contacting us on that matter and providing us with detailed information about your scenario. We understand that you need our assistance to overcome the reported behavior. We tried to reproduce it on our side with our latest official and it seems that the code works as expected. I cannot force any RadTreeViewItem (using the UI only) not to go in edit mode when I click on the text of the item for the second time.

Could you please take a look at the attached project and let us know if I missed something. We are looking forward for your answer

Regards,
Pavel R. Pavlov
Telerik

[Oded]

Hi, Pavel.

Thank you for your help.

But It seem that … question was not so clear.

The problem is that the launch button and RadTreeView should be in the DIFFERENT WINDOWs. The button should not add new elements to the current window but open an ADDITIONAL ONE, containing the RadTreeView. (As it was in my question – see method button1_Click in the MainPage.xaml.cs in my example.). It seems, the problem will appear when you will use not the same window, but another one.

Any suggestion?
Thank in advance.
Yakov.

 

[Pavel R. Pavlov]

Hi Oded,

I changed the implementation of the project so that it opens a new window, but it uses our RadWindow control instead of the native Window. Please take a look at the attached project and let me know if there are any other questions.

Regards,
Pavel R. Pavlov
Telerik