Telerik Forums / UI for WPF
This is a migrated thread and some comments may be shown as answers.

Selecting subitem in edit mode not working properly

2 Answers 120 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Pawel
Top achievements
Rank 1
Pawel asked on 20 Aug 2014, 08:20 AM
works.png
error.png
normal.png
I have Work class (Work.cs):
using System;
using System.Collections.Generic;
 
namespace TelerikTreeViewApp
{
    public class Work
    {
        public String Title { get; set; }
 
        public Work(String title)
        {
            Title = title;
        }
 
        public List<Project> Projects { get; set; }
    }
}
and Project class (Project.cs):
using System;
 
namespace TelerikTreeViewApp
{
    public class Project
    {
        public String Title { get; set; }
 
        public Project(String title)
        {
            Title = title;
        }
    }
}

I bind collection of Work to treeView which is using HierarchicalDataTemplate:
<Window x:Class="TelerikTreeViewApp.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="ProjectTemplate">
            <TextBlock Text="{Binding Title}" />
        </DataTemplate>
         
        <HierarchicalDataTemplate x:Key="WorkTemplate"
                                  ItemTemplate="{StaticResource ProjectTemplate}"
                                  ItemsSource="{Binding Projects}">
            <TextBlock Text="{Binding Title}" />
        </HierarchicalDataTemplate>
    </Window.Resources>
         
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
         
        <StackPanel Grid.Column="0">
            <telerik:RadButton Click="RadButton_Click" Content="Test 1" />
        </StackPanel>
         
        <telerik:RadTreeView x:Name="treeView"
                             IsEditable="True"
                             ItemsSource="{Binding Works}"
                             ItemTemplate="{StaticResource WorkTemplate}"
                             PathSeparator="|"
                             telerik:TextSearch.TextPath="Title"
                             Grid.Column="1" />
    </Grid>
</Window>

TreeView shows works for first level and for second level for every work shows projects (appendix works.png).

I want to be able to programmatically select project item and set it to edit mode (MainWindow.xaml.cs, MyData class is at the end):
using System.Linq;
using System.Windows;
using Telerik.Windows.Controls;
 
namespace TelerikTreeViewApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private string titleWork;
 
        private string titleProject;
 
        public MainWindow()
        {
            InitializeComponent();
 
            titleWork = "Work 2";
            titleProject = titleWork + " - Project 4";
 
            DataContext = new MyData();
        }
 
        private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            var work = treeView.Items.SourceCollection.Cast<Work>().FirstOrDefault(w => w.Title == titleWork);
            var workItem = treeView.ContainerFromItemRecursive(work);
 
            workItem.IsExpanded = true;
 
            var projectItem = treeView.GetItemByPath(titleWork + "|" + titleProject, "|");
 
            projectItem.IsSelected = true;
            projectItem.IsInEditMode = true;
            projectItem.Focus();
             
        }
    }
}
In RadButton_Click method I do that by GetItemByPath method. When I run application it shows some weird UI error (appendix error.png) but it should shows project title (appendix normal.png).

MyData.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
 
namespace TelerikTreeViewApp
{
    public class MyData
    {
        public ObservableCollection<Work> Works { get; set; }
 
        public ObservableCollection<Project> Projects { get; set; }
 
 
        public MyData()
        {
            InitializeWorks();
 
            Projects = new ObservableCollection<Project>();
        }
 
        public void InitializeWorks()
        {
            String workTitle = String.Empty;
 
            Works = new ObservableCollection<Work>();
 
            workTitle = "Work 1";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 2";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 3";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 4";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 5";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 6";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 7";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
            workTitle = "Work 8";
            Works.Add(new Work(workTitle)
            {
                Projects = new List<Project>(new Project[] {
                new Project(workTitle + " - Project 1") ,
                new Project(workTitle + " - Project 2") ,
                new Project(workTitle + " - Project 3") ,
                new Project(workTitle + " - Project 4") ,
                new Project(workTitle + " - Project 5") ,
                new Project(workTitle + " - Project 6") ,
                new Project(workTitle + " - Project 7") ,
                new Project(workTitle + " - Project 8") ,
                new Project(workTitle + " - Project 9") ,
                new Project(workTitle + " - Project 10"),
                new Project(workTitle + " - Project 11") ,
                new Project(workTitle + " - Project 12") ,
                new Project(workTitle + " - Project 13") ,
                new Project(workTitle + " - Project 14") ,
                new Project(workTitle + " - Project 15") ,
                new Project(workTitle + " - Project 16") ,
                new Project(workTitle + " - Project 17") ,
                new Project(workTitle + " - Project 18") ,
                new Project(workTitle + " - Project 19") ,
                new Project(workTitle + " - Project 20")
            })
            });
        }
 
    }
}

2 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 20 Aug 2014, 08:56 AM
WpfApplication1.zip
Hi Pawel,

We understand your requirement and its complexity comes from the fact that the container - the RadTreeViewItem should be first generated, then its template should be changed with EditTemplate and the Text in the InputControl should be focused. On top of this, RadTreeView uses built-in animations on expand collapse which also make the work of the UI heavier.

 However, what is the usual solution ? I will summarize it in 3 steps you can perform:

1) Make your Title properties ready for 2-way binding, for example like so:
public class Work : ViewModelBase
   {
       private string title;
       public string Title
       {
           get { return this.title; }
           set
           {
               if (this.title != value)
               {
                   this.title = value;
                   this.OnPropertyChanged("Title");
               }
           }
       }

2) Introduce EditTemplate - the template which will be applied when the item enters Edit Mode:
<DataTemplate x:Key="ItemEditTemplate">
           <TextBox Text="{Binding Title, Mode=TwoWay}" />
       </DataTemplate>
 
 <telerik:RadTreeView x:Name="treeView"
                            IsEditable="True"
                            ItemsSource="{Binding Works}"
                            ItemTemplate="{StaticResource WorkTemplate}"
                            ItemEditTemplate="{StaticResource ItemEditTemplate}"

3) Invoke the code that turns on editing in Dispatcher because the RadTreeViewItem needs time after expand animation and its actual generation:
projectItem.IsSelected = true;
Dispatcher.BeginInvoke(new Action(()=>
projectItem.IsInEditMode = true), DispatcherPriority.ApplicationIdle);
projectItem.Focus();

Let us know if this helps you move forward.

Regards,
Petar Mladenov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Pawel
Top achievements
Rank 1
answered on 21 Aug 2014, 06:32 AM
Works great. Thank you very much.
Tags
TreeView
Asked by
Pawel
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Pawel
Top achievements
Rank 1
Share this question
or