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

[Solved] Editing item in RadTree makes it dissappear.

35 Answers 501 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

Rob asked on 25 Jun 2009, 09:02 PM

I am trying to edit an item in a RadTree using the built in editor. After I edit the item, the underlying collection appears to be updated but the item dissappears from the tree.

Here is a code sample that attempts to follow the pattern illustrated here:
http://www.telerik.com/community/forums/silverlight/treeview/iseditable-and-databinding.aspx

I have created a simple 2-column grid with a RadTree on the left and an ItemsControl on the right. The ItemsControl is simply used to illustrate that the collection has indeed changed.

    
            using System.Collections.ObjectModel;  
        
            using System.ComponentModel;  
        
            using System.Windows;  
        
            using System.Windows.Controls;  
        
            using Telerik.Windows.Controls;  
        
            namespace Telerik_Quick_Test  
        
            {  
        
                public partial class Page : UserControl  
        
                {  
        
                    ObservableCollection<ProjectPortfolioType> _data = null;  
        
                    public ObservableCollection<ProjectPortfolioType> data  
        
                    {  
        
                        get 
        
                        {  
        
                            if (_data == null)  
        
                            {  
        
                                ProjectPortfolioType t = new ProjectPortfolioType() { ID = 1, Name = "root" };  
        
                                ProjectPortfolio i = new ProjectPortfolio(t) { Name2 = "node 1" };  
        
                                ObservableCollection<ProjectPortfolio> ci = new ObservableCollection<ProjectPortfolio>();  
        
                                ci.Add(i);  
        
                                i = new ProjectPortfolio(t) { Name2 = "node 2" };  
        
                                ci.Add(i);  
        
                                t.ProjectPortfolio = ci;  
        
                                _data = new ObservableCollection<ProjectPortfolioType>();  
        
                                _data.Add(t);  
        
                            }  
        
                            return _data;  
        
                        }  
        
                    }  
        
                    public Page()  
        
                    {  
        
                        InitializeComponent();  
        
                        PortfolioTree.ItemsSource = data;  
        
                        itemsControl1.ItemsSource = data[0].ProjectPortfolio;  
        
                        if (PortfolioTree != null)  
        
                        {  
        
                            PortfolioTree.Edited += new RadTreeViewItemEditedEventHandler(PortfolioTree_Edited);  
        
                        }  
        
                    }  
        
                    void PortfolioTree_Edited(object sender, RadTreeViewItemEditedEventArgs e)  
        
                    {  
        
                        var treeViewItem = e.OriginalSource as RadTreeViewItem;  
        
                        ProjectPortfolio level1 = (treeViewItem.DataContext) as ProjectPortfolio;  
        
                        if (level1 != null)  
        
                            level1.Name2 = e.NewText;  
        
                        ProjectPortfolioType level2 = (treeViewItem.DataContext) as ProjectPortfolioType;  
        
                        if (level2 != null)  
        
                            level2.Name = e.NewText;  
        
                    }  
        
                }  
        
                public class ProjectPortfolioType : INotifyPropertyChanged  
        
                {  
        
                    public int ID { get; set; }  
        
                    public string NameField;  
        
                    public string Name  
        
                    {  
        
                        get 
        
                        {  
        
                            return this.NameField;  
        
                        }  
        
                        set 
        
                        {  
        
                            if ((object.ReferenceEquals(this.NameField, value) != true))  
        
                            {  
        
                                this.NameField = value;  
        
                                this.RaisePropertyChanged("Name");  
        
                            }  
        
                        }  
        
                    }  
        
                    public ObservableCollection<ProjectPortfolio> ProjectPortfolio { get; set; }  
        
                    public override string ToString()  
        
                    {  
        
                        return Name;  
        
                    }  
        
                    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;  
        
                    public void RaisePropertyChanged(string propertyName)  
        
                    {  
        
                        System.ComponentModel.PropertyChangedEventHandler propertyChanged = this.PropertyChanged;  
        
                        if ((propertyChanged != null))  
        
                        {  
        
                            propertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));  
        
                        }  
        
                    }  
        
                }  
        
                public class ProjectPortfolio : INotifyPropertyChanged  
        
                {  
        
                    ProjectPortfolioType _type;  
        
                    public ProjectPortfolio(ProjectPortfolioType type)  
        
                    {  
        
                        _type = type;  
        
                    }  
        
                    public int ID { get; set; }  
        
                    public string NameField = "";  
        
                    public string Name2  
        
                    {  
        
                        get 
        
                        {  
        
                            return this.NameField;  
        
                        }  
        
                        set 
        
                        {  
        
                            if ((object.ReferenceEquals(this.NameField, value) != true))  
        
                            {  
        
                                this.NameField = value;  
        
                                this.RaisePropertyChanged("Name2");  
        
                                _type.RaisePropertyChanged("ProjectPortfolio");  
        
                            }  
        
                        }  
        
                    }  
        
                    public string Desc { get; set; }  
        
                    public int ProjectLinksCount { get; set; }  
        
                    public override string ToString()  
        
                    {  
        
                        return Name2;  
        
                    }  
        
                    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;  
        
                    protected void RaisePropertyChanged(string propertyName)  
        
                    {  
        
                        System.ComponentModel.PropertyChangedEventHandler propertyChanged = this.PropertyChanged;  
        
                        if ((propertyChanged != null))  
        
                        {  
        
                            propertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));  
        
                        }  
        
                    }  
        
                }  
        
            }

    
            <UserControl    x:Class="Telerik_Quick_Test.Page" 
        
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
        
                            xmlns:TC="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        
                            xmlns:TC_Nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
        
            > 
        
                <UserControl.Resources> 
        
                    <DataTemplate x:Key="template2">  
        
                        <TextBlock Text="{Binding Name2,Mode=TwoWay}" /> 
        
                    </DataTemplate> 
        
                    <TC:HierarchicalDataTemplate x:Key="template1" ItemTemplate="{StaticResource template2}" ItemsSource="{Binding ProjectPortfolio, Mode=TwoWay}">  
        
                        <TextBlock Text="{Binding Name, Mode=TwoWay}" /> 
        
                    </TC:HierarchicalDataTemplate> 
        
                </UserControl.Resources> 
        
                <Grid x:Name="LayoutRoot" Margin="10">  
        
                    <Grid.ColumnDefinitions> 
        
                        <ColumnDefinition Width="1*" /> 
        
                        <ColumnDefinition Width="1*" /> 
        
                    </Grid.ColumnDefinitions> 
        
                    <Grid.RowDefinitions> 
        
                        <RowDefinition Height="1*" /> 
        
                    </Grid.RowDefinitions> 
        
                    <TC_Nav:RadTreeView x:Name="PortfolioTree" Grid.Column="0" IsEditable="True" ItemTemplate="{StaticResource template1}">  
        
                    </TC_Nav:RadTreeView> 
        
                    <ItemsControl x:Name="itemsControl1" Grid.Column="1">  
        
                        <ItemsControl.ItemTemplate> 
        
                            <DataTemplate> 
        
                                <TextBox Text="{Binding Name2,Mode=TwoWay}"/>  
        
                            </DataTemplate> 
        
                        </ItemsControl.ItemTemplate> 
        
                    </ItemsControl> 
        
                </Grid> 
        
            </UserControl>

35 Answers, 1 is accepted

answered on 26 Jun 2009, 04:04 PM

Hi Rob,
We deeply apologize for the caused inconvenience.

In the last internal build the build in editing functionality works as expected only without data binding.
This issue is already fixed and the change will be reflected in our Q2 release which is scheduled for the beginning of July.
We will have an edit templates feature done for the release and a lot of improvements in RadTreeView so you will be able to customize the edit experience much better then.

However if you need the updated assemblies urgently we could make a custom build from our main branch for you but the assemblies contain new development and some things may not be tested thoroughly so we cannot guarantee that it is fully stable, because it is not tested as an official build yet.

All the best,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 05 Nov 2009, 10:30 PM

Hi,

I'm just upgrading to the Q3 release and have found this is reappearing. I can hit F2 and edit my node, but then the text is completely blank after I hit enter. If I hit F2 again, my new text appears for editing, but then vanishes again when I hit enter. When I examine the databound object in the _edited event, it seems as though my editing is finding its way through to the object ok, but is for some reason not being displayed.

Is this a bug, or does something in my code have to change for the Q3 release?

Thanks, James.

answered on 06 Nov 2009, 09:48 AM

Hello James,

Please take a look at the following online example:
http://demos.telerik.com/silverlight/#TreeView/NodeEditing
We were unable to reproduce this issue.
Make sure that you set "Mode=TwoWay" when binding the items in the ItemEditTemplate:
<telerikNavigation:RadTreeView.ItemEditTemplate>
                   <DataTemplate>
                       <StackPanel Orientation="Horizontal">
                           <TextBox Text="{Binding Name, Mode=TwoWay}" />
                           <input:RadMaskedTextBox Value="{Binding ID, Mode=TwoWay}" MaskType="Numeric" Mask="#"/>
                       </StackPanel>
                   </DataTemplate>
               </telerikNavigation:RadTreeView.ItemEditTemplate>

If you still have any other questions or need some more help please send us some sample project in order to fix it.

Regards,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 06 Nov 2009, 08:21 PM

Hi Boryana,

Thanks for your answer. I didn't have 'TwoWay' in the template, but it doesn't seem to make any difference (and I didn't have it before changing to Q3 and it was fine).

My template code is this:

<core:HierarchicalDataTemplate x:Key="AttributeTemplate" ItemsSource = "{Binding Attributes, Mode=TwoWay}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding AttributeName, Mode=TwoWay}" />
            </StackPanel>
        </core:HierarchicalDataTemplate>

I don't have the additional '<input:RadMaskedTextBox... etc' that you have in your example. Do I need it? (I haven't so far, and am able to edit the text.)

My binding code is simple in the cs file:
TreeView.ItemTemplate = ((DataTemplate)this.Resources["CodeSet"]);
TreeView.ItemsSource = (ReviewSetsList)(App.Current.Resources["CodeSets"]);

This all worked before the change to Q3, so I'm wondering what's changed?

Thanks for your help, James.

(btw - the example page you mention is blank when I click 'view code')

answered on 10 Nov 2009, 08:53 AM

treeview-databinding-silverligth-3.zip

Hi James,

Please find attached a sample project that demonstrates the editing functionality of RadTreeView.
I hope that this will help you.
Please let us know if you have any other questions or you need some more help.

Kind regards,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 11 Nov 2009, 09:26 PM

Hi Boryana,

Thanks for your answer - that's helpful - I'm half-way there.

The additional code that was needed was the

<telerikNavigation:RadTreeView.ItemEditTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding AttributeName, Mode=TwoWay}"/>
                                        </Grid>
                                    </DataTemplate>
                                </telerikNavigation:RadTreeView.ItemEditTemplate>

However, I have two HierarchicalDataTemplates in the treeview and need to bind to different values depending on the underlying data object. Please can you tell me how to modify this to support this? (Do I put the above code somewhere in here?)

<core:HierarchicalDataTemplate x:Key="AttributeTemplate" ItemsSource = "{Binding Attributes}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding AttributeName}" />
            </StackPanel>
        </core:HierarchicalDataTemplate>

        <core:HierarchicalDataTemplate x:Key="CodeSet" ItemTemplate="{StaticResource AttributeTemplate}" ItemsSource = "{Binding Attributes}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding SetName}" />
            </StackPanel>
        </core:HierarchicalDataTemplate>

Thanks for your help, James.

answered on 17 Nov 2009, 11:38 AM

Hello James,

First we apologize for the delay reply.
If you want to have different edit values depending on the underlying data object then you have to use ItemEditTemplateSelector instead of ItemEditTemplate.
Here you can find example that shows how to implement a Selector:

http://demos.telerik.com/silverlight/#TreeView/HierarchicalTemplate

You can use something similar in your occasion but set the ItemEditTemplateSelector instead.
Note also that you have to use binding in "Mode=TwoWay".
I hope that this will be helpful.

Greetings,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 18 Nov 2009, 05:33 PM

I'm having a similar problem as well, except I'm using the built in editor... not the edit template. It was not working in the Q1 release, fixed in the Q2 release, and now it is not working again in the Q3 release. When I press the F2 key or trigger an edit by setting the IsInEditMode property, change the value, and then hit enter, the displayed value of the node blanks out on the tree.

It's setting the value properly and will show up in the editor when I hit F2 again on that node.

Thanks,
Jarred Froman

answered on 20 Nov 2009, 04:52 PM

treeviewitemedittemplate.zip

Hello James and Jarred,

When the treeview is not bound, node editing works out of the box and you do not have to specify an ItemEditTemplate. The reason for this is that when you hit F2, the treeview item makes ToString() to the Header and displays the result in the edit textbox. When you hit return, the text in the edit textbox is given as Header to the treeview item.
In case of a bound tree you will have to use the ItemEditTemplate, so that you do not experience the case of a blank treeview item. I have prepared a small project that demonstrates the usage of an ItemEditTemplateSelector. Using ItemEditTemplate and ItemEditTemplateSelector allow for greater extensibility of the treeview and once understood are not big of a deal.
Have a look at the sample project, and if you have additional questions, let me know.

Sincerely yours,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 20 Nov 2009, 05:06 PM

Hi Kiril,

Thank you for providing the explanation and the work-around.... however, I'm a bit confused. This was reported as a bug before the Q2 release and was acknowledged then as a bug and fixed for that release. If the tree can can be bound initially and work and then have a side-effect when you go to edit, wouldn't this still be considered a bug? Why not then just prevent the binding if using the internal editor?

We would still prefer to use the built in editor as it means less development on our parts. To go through and refactor our application to use the itemedittemplateselector would be a considerable undertaking that we would like to avoid. If I need to submit this through the appropriate channels for further consideration, please let me know.

Thanks,
Jarred Froman

answered on 23 Feb 2010, 05:56 PM

treeviewautogeneratetemplates.zip

Hello James,

Yes, this improvement was not part of the beta. I am sending you a project with a build where the feature is implemented.

It will be part of one of the next internal builds (possibly this week's) and of course the release.

I will also make the work item visible in the Public Issue Tracking System, it may take up to 24h. to become visible for you, the item will be called:

TreeView: Automatically generate item edit templates

As for your previous question - the release is expected in the middle of March :)

Hopefully this will work for you,

Greetings,
Miroslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 04 Mar 2010, 02:14 PM

Hi,

I have tried the attached examples in the previous posts. All the examples work well. If I provide

Text

="{Binding Name, Mode=TwoWay}" in the CellEditTemplate the value is changed automatically in the Object as well.
My Problem is as below.
I am paasing the updated object for saving. if all goes well then no problem but if there is some problem in saving (Some exception is return from the save functionality) then I want to again rollback to the old value in the tree and also in the object. In the Edited event if you look the Properties "OldValue" and "NewValue" both are getting changed because of the Text="{Binding Name, Mode=TwoWay}" . I think twoway binding should not change the "OldValue" property. It should only change the "NewValue" property.

Is there any workaround for getting the old value? I dont want to fetch again from database.

Regards,
Niranjan

answered on 09 Mar 2010, 09:08 AM

Hi Niranjan,

When using binding OldValue and NewValue are providing the same value, this is known issue and will be fixed for next releases. One possible workaround is to handle the EditStarted event and preserve the current value and also handle PreviewEdited so if the new value is not valid just handle the preview event (e.Handled = true).
Please let us know if this works for you.

Sincerely yours,
Miro Miroslavov
the Telerik team

answered on 03 Aug 2011, 08:57 AM

Hello James!

For me the newest release haven't solved the problem yet.

<telerik:RadTreeView x:Name="lawTreeView"

IsLineEnabled="True"

Margin="20,10,0,0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

ItemsSource="{Binding Path=TreeItemCollection, Mode=TwoWay}"

ItemTemplate="{StaticResource NodeTemplate}"

SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"

SelectionMode="Single"

IsExpandOnDblClickEnabled="True"

ScrollViewer.HorizontalScrollBarVisibility="Auto"

ScrollViewer.VerticalScrollBarVisibility="Auto"

IsEditable="True">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Edited">

<cmd:EventToCommand Command="{Binding Path=EditedLawCommand}"

PassEventArgsToCommand="False" />

</i:EventTrigger>

</i:Interaction.Triggers>

<telerik:RadTreeView.ItemEditTemplate>

<DataTemplate>

<TextBox Text="{Binding Name, Mode=TwoWay}" MaxLength="100" />

</DataTemplate>

</telerik:RadTreeView.ItemEditTemplate>

</telerik:RadTreeView>

UserControlResources:

<UserControl.Resources>

<converter:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

<converter:BooleanToFontWeightConverter x:Key="BooleanToFontWeightConverter" />

<telerik:ContainerBindingCollection x:Key="BindingsCollection">

<telerik:ContainerBinding PropertyName="IsSelected"

Binding="{Binding IsSelected, Mode=TwoWay}" />

<telerik:ContainerBinding PropertyName="IsExpanded"

Binding="{Binding IsExpanded, Mode=TwoWay}" />

<telerik:ContainerBinding PropertyName="IsInEditMode"

Binding="{Binding IsInEditMode, Mode=TwoWay}" />

<telerik:ContainerBinding PropertyName="FontWeight"

Binding="{Binding IsRoot, Mode=TwoWay, Converter={StaticResource BooleanToFontWeightConverter}}" />

</telerik:ContainerBindingCollection>

<telerik:HierarchicalDataTemplate x:Key="NodeTemplate"

telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}"

ItemsSource="{Binding Children}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Name, Mode=TwoWay}"

Margin="5,0,0,0" />

</StackPanel>

</telerik:HierarchicalDataTemplate>

</UserControl.Resources>

I would be great if you could help me.

Thanks in advance

Andi

answered on 26 Aug 2011, 08:13 PM

I'll add my vote for raising the priority.

The issue is worse (IMO) than described in the PITS.

I have a tree view that I am using with Edit (via F2 and Context Menu) and Add (Context Menu - this will add a new item and bring it into edit mode) functionality similar to a windows folder tree. Fast clicking and F2 is one way to cause it to stop working, but it seems to happen somewhat randomly and frequently when trying to put any item in edit mode programmatically. Once this happens the entire tree view is forever corrupted. Hitting F2 does nothing (OK, not so horrible), but setting edit mode via rename or add will cause weird things like disappearing tree view items and the like. There seems to be no way to get the treeview to work again short of reloading the app.

All this works fine with the 2011_1_0419_Trial_hotfix release, which I was forced to downgrade to.

Doug