This is a migrated thread and some comments may be shown as answers.
How can I add treeItem in bind hierarchical data RadTreeView?
4 Answers 86 Views
This is a migrated thread and some comments may be shown as answers.
jiang
Top achievements
Rank 1
jiang asked on 17 Jan 2011, 09:36 AM
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 ?

4 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 19 Jan 2011, 05:04 PM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
jiang
Top achievements
Rank 1
answered on 20 Jan 2011, 03:12 AM
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?


0
jiang
Top achievements
Rank 1
answered on 20 Jan 2011, 03:22 PM
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.

0
Petar Mladenov
Telerik team
answered on 25 Jan 2011, 01:21 PM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Asked by
jiang
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
jiang
Top achievements
Rank 1
Share this question
or