How can I add treeItem in bind hierarchical data RadTreeView?

[jiang]

hi:
table define:
MyFolder table
FolderId (primary key)
FolderName
ParentFolderId

my FileView.xml like this:

<UserControl.Resources>
    <ResourceDictionary>
        <telerik:HierarchicalDataTemplate x:Key="FileFolderTemplate" ItemsSource="{Binding EOM_FileFolders1}">
            <TextBlock Text="{Binding FolderName}"/>
        </telerik:HierarchicalDataTemplate>
    </ResourceDictionary>
</UserControl.Resources>


<Grid x:Name="_LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="5"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border Grid.Row="0">
        <telerik:RadToolBar>
            <telerik:RadButton x:Name="_BtnAddFolder" Click="_BtnAddFolder_Click">
                <telerik:RadButton x:Name="_AddFolder" Content="AddFolder"/>
            <telerik:RadToolBarSeparator/>
            <telerik:RadButton x:Name="_Rename" Content="Rename"/>
            <telerik:RadToolBarSeparator/>
            <telerik:RadButton x:Name="_DeleteFolder" Content="DeleteFolder"/>
        </telerik:RadToolBar>
    </Border>
    <Border Grid.Row="2">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="8"/>
                <ColumnDefinition Width="300"/>
                <ColumnDefinition />
                <ColumnDefinition Width="8"/>
            </Grid.ColumnDefinitions>
            <Border Grid.Column="1">
                <telerik:RadTreeView x:Name="_FilesTreeView" IsLineEnabled="True" IsEditable="True">
                    <telerik:RadTreeViewItem Header="MyConputer" Name="Files_MyComputerItem">
                        <telerik:RadTreeViewItem Header="MyDocument"  Name="Files_MydocumentItem" ItemsSource="{Binding ElementName= _MyFoldersDomainDataSource, Path=Data}" ItemTemplate="{StaticResource FileFolderTemplate}"/>
                </telerik:RadTreeView>
            </Border>
            <Border Grid.Column="2"></Border>
            <riaControls:DomainDataSource AutoLoad="True"  LoadedData="FileFoldersDomainDataSource_LoadedData" Name="_MyFoldersDomainDataSource" QueryName="GetFoldersByMyFolderQuery">
                <riaControls:DomainDataSource.DomainContext>
                    <my:DataContext />
                </riaControls:DomainDataSource.DomainContext>
            </riaControls:DomainDataSource>
        </Grid>
    </Border>
</Grid>

My Question is :

1. How can I add new treeItem in this bind hierarchical data's RadTreeView?
2. How can I add new treeItem in itemeditMode in this bind hierarchical data's RadTreeView?
3. Display the TreeView like this :  when Folder has childfolder ,this treeitem's image use "full_folder.png". when Folder has no childerfolder, this treeitem's image  use 'folderEmpty.png'. How can I do ?

[Petar Mladenov]

Hi jiang,

If you don`t want the new items to be added in your database, you have to use a ViewModel class for your tree and ViewModel class for your TreeViewItem. Then you will work with the collection that is located in your ViewModel class. Initially this collection will load its data from the Wcf / ADO / LinqToSql service.
Your TreeViewItem viewmodel class can have IsInEditMode property you can bind via container bindings.
You can also have boolean property that shows if a treeViewitem has children. You can use Converters to convert this boolean property to ImageSource that will be bound to the DefaultImageSrc of the RadTreeViewItem.
Hope this was a good starting point for you. Feel free to ask if you need more info.

Best wishes,
Petar Mladenov
the Telerik team

[jiang]

hi, thanks.
About the three question's answer:
You can also have boolean property that shows if a treeViewitem has children. You can use Converters to convert this boolean property to ImageSource that will be bound to the DefaultImageSrc of the RadTreeViewItem.

can you give me a example?

[jiang]

Hi. this is my code:

FileFolder.c
public class FileFolder
{
    private bool isInEditMode, isExpanded, isSelected;
        public event PropertyChangedEventHandler PropertyChanged;
    Public FolderId { get; set; }
    Public FolderName { get; set; }
    public EntityCollection<FileFolder> FileFolders1 { get; set; }
        public bool IsSelected
        {
            get
            {
                return this.isSelected;
            }
            set
            {
                if (this.isSelected != value)
                {
                    this.isSelected = value;
                    this.OnPropertyChanged("IsSelected");
                }
            }
        }
        public bool IsExpanded
        {
            get
            {
                return this.isExpanded;
            }
            set
            {
                if (this.isExpanded != value)
                {
                    this.isExpanded = value;
                    this.OnPropertyChanged("IsExpanded");
                }
            }
        }
        public bool IsInEditMode
        {
            get
            {
                return this.isInEditMode;
            }
            set
            {
                if (this.isInEditMode != value)
                {
                    this.isInEditMode = value;
                    this.OnPropertyChanged("IsInEditMode");
                }
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
}

FileView.xaml

    <UserControl.Resources>
        <ResourceDictionary>
            <telerik:ContainerBindingCollection x:Key="_ContainerBindings">
                <telerik:ContainerBinding PropertyName="IsExpanded"
                    Binding="{Binding IsExpanded, Mode=TwoWay}" />
                <telerik:ContainerBinding PropertyName="IsSelected"
                    Binding="{Binding IsSelected, Mode=TwoWay}" />
                <telerik:ContainerBinding PropertyName="IsInEditMode"
                    Binding="{Binding IsInEditMode, Mode=TwoWay}" />
            </telerik:ContainerBindingCollection>
            <DataTemplate x:Key="EditTemplate">
                <TextBox Text="{Binding FolderName, Mode=TwoWay}" />
            </DataTemplate>
            <telerik:HierarchicalDataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource _ContainerBindings}" x:Key="FileFolderTemplate" ItemsSource="{Binding FileFolders1}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Images/EOM_Files_Folder.png" />
                    <TextBlock Text="{Binding FolderName}"/>
                </StackPanel>
            </telerik:HierarchicalDataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
<Grid>
<telerik:RadToolBar>
                <telerik:RadButton x:Name="_BtnAddFolder" Content="AddFolder" Click="_BtnAddFolder_Click"/>
                <telerik:RadButton x:Name="_BtnRename" Content="Rename" Click="_BtnRename_Click"/>
                <telerik:RadButton x:Name="_BtnDelete" Content="Delete" Click="_BtnDelete_Click"/>
</telerik:RadToolBar>
                    <telerik:RadTreeView x:Name="_FilesTreeView" IsEditable="True" PreviewEdited="_FilesTreeView_PreviewEdited" ItemEditTemplate="{StaticResource EditTemplate}" IsLineEnabled="True">
                        <telerik:RadTreeViewItem Header="MyComputer" Name="_Files_MyComputerItem">
                            <telerik:RadTreeViewItem Header="MyDocument" Name="_Files_MydocumentItem" ItemTemplate="{StaticResource FileFolderTemplate}" ItemSource={bing ElementName="FileFolderDomainDataSource"}/>
                        </telerik:RadTreeViewItem>
                    </telerik:RadTreeView>
</Grid>

FileView.xaml.c
 public partial class FilesView : UserControl
    {
        public FilesView()
        {
            InitializeComponent();
        }

        private void _BtnAddFolder_Click(object sender, RoutedEventArgs e)
        {
            this.AddItem();
        }
        private void AddItem()
        {
            if (this._FilesTreeView.SelectedItem != null)
            {
                FileFolder fileFolder = _FilesTreeView.SelectedItem as FileFolder;
                FileFolder newFileFolder = new FileFolder()
                {
                    FolderId = Guid.NewGuid(),
                    FolderName = "NewFolder",
                    ParentFolderId = fileFolder.FolderId,
                    IsSelected = true
                };
                Dispatcher.BeginInvoke(() =>
                {
                    newFileFolder.IsInEditMode = true;
                });
                fileFolder.FileFolders1.Add(newFileFolder);
                fileFolder.IsExpanded = true;
            }
        }
       private void _BtnRename_Click(object sender, RoutedEventArgs e)
        {
            if (this._FilesTreeView.SelectedItem != null)
            {
                FileFolder fileFolder = _FilesTreeView.SelectedItem as FileFolder;
                fileFolder.IsInEditMode = true;
            }
        }
}

In this code:
I can not rename the treeviewitem 's name when I click the rename button, I can not find the reason.

[Petar Mladenov]

Hi jiang,

We are unable to reproduce your issue in our environment.
Could you please try to elaborate more on your scenario, is your FileFolder class an Entity class ?  We would highly appreciate if you can send us your project so that we could investigate in depth? Basically, I cannot see something wrong in your code (you can check out the attached sample if I am missing something), but I can't get an idea of how you work with your database, so any additional code would be very useful. Thank you for your cooperation in advance.

As for the converter example if you have boolean property in you ViewModel (for example HasChildren), you can do like so:

<local:ImageConverter x:Key="BooleanToImageConverter" />
.....
 <Image Source="{Binding HasChildren, Converter={StaticResource BooleanToImageConverter}}" />

public class ImageConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool? haschildren = value as bool?;
            if (haschildren.HasValue)
            {
                if (haschildren == true)
                {
                    return new BitmapImage(new Uri("Images/WithChildre.png"));
                }
                else
                    return new BitmapImage(new Uri("Imges/WithoutChildren.ong"));
            }
            return new BitmapImage();
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Kind regards,
Petar Mladenov
the Telerik team