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

Edit mode of RadTreeViewItem and lost focus.

3 Answers 46 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Oded
Top achievements
Rank 1
Oded asked on 11 Dec 2013, 04:38 PM
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: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"
    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?

3 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 14 Dec 2013, 02:57 PM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Oded
Top achievements
Rank 1
answered on 15 Dec 2013, 12:39 PM

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.

 

0
Pavel R. Pavlov
Telerik team
answered on 18 Dec 2013, 03:50 PM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
TreeView
Asked by
Oded
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Oded
Top achievements
Rank 1
Share this question
or