Hello!
I am trying to add information into Telerik TreeListView control.
I did a simple example with 3 columns, but I don´t know how to load information into TreeListView.
See my example. I would like to load data using my Class LoadData(). How to set PARENT NODE into TreeListView ? Is there another way to do it?
Thanks!!
public class DataSource : List<Organization>
{
public DataSource()
{
Organization org = new Organization("OrganizationXYZ", false, true);
Department Sales = new Department("Sales", false, true);
Department Marketing = new Department("Marketing", false, false);
org.Departments.Add(Sales);
org.Departments.Add(Marketing);
Sales.Employees.Add(new Person("Person1", true));
Sales.Employees.Add(new Person("Person2", false));
Sales.Employees.Add(new Person("Person3", false));
Marketing.Employees.Add(new Person("Person4", false));
Marketing.Employees.Add(new Person("Person5", false));
this.Add(org);
}
}
______
public class Organization : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string name;
private bool selected = false;
private bool expanded = false;
public Organization(string name)
{
this.name = name;
Departments = new List<Department>();
}
public Organization(string name, bool selected, bool expanded)
{
this.name = name;
this.selected = selected;
this.expanded = expanded;
Departments = new List<Department>();
}
public string Name
{
get
{
return this.name;
}
set
{
if (value != this.name)
{
this.name = value;
NotifyPropertyChanged("Name");
}
}
}
public bool Selected
{
get
{
return this.selected;
}
set
{
if (value != this.selected)
{
this.selected = value;
NotifyPropertyChanged("Selected");
}
}
}
public bool Expanded
{
get
{
return this.expanded;
}
set
{
if (value != this.expanded)
{
this.expanded = value;
NotifyPropertyChanged("Expanded");
}
}
}
public List<Department> Departments
{
get;
set;
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
______
public class Department : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string name;
private bool selected = false;
private bool expanded = false;
public Department(string name)
{
this.name = name;
Employees = new List<Person>();
}
public Department(string name, bool selected, bool expanded)
{
this.name = name;
this.selected = selected;
this.expanded = expanded;
Employees = new List<Person>();
}
public string Name
{
get
{
return this.name;
}
set
{
if (value != this.name)
{
this.name = value;
NotifyPropertyChanged("Name");
}
}
}
public bool Selected
{
get
{
return this.selected;
}
set
{
if (value != this.selected)
{
this.selected = value;
NotifyPropertyChanged("Selected");
}
}
}
public bool Expanded
{
get
{
return this.expanded;
}
set
{
if (value != this.expanded)
{
this.expanded = value;
NotifyPropertyChanged("Expanded");
}
}
}
public List<Person> Employees
{
get;
set;
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
______
public class Person : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string name;
private bool selected = false;
public Person(string name)
{
this.name = name;
}
public Person(string name, bool selected)
{
this.name = name;
this.selected = selected;
}
public string Name
{
get
{
return this.name;
}
set
{
if (value != this.name)
{
this.name = value;
this.NotifyPropertyChanged("Name");
}
}
}
public bool Selected
{
get
{
return this.selected;
}
set
{
if (value != this.selected)
{
this.selected = value;
NotifyPropertyChanged("Selected");
}
}
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
______
<telerikNavigation:RadTreeListView IsLineEnabled="True" IsEditable="True"
x:Name="RadTreeListView1" Background="White" Margin="10,94,10,309"
BorderBrush="#a9a9a9" BorderThickness="1" SelectionMode="Multiple">
<telerikNavigation:RadTreeListView.Columns>
<telerikNavigation:RadColumn x:Name="RadColumnName" PropertyName="Name" Header="Name">
<telerikNavigation:RadColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="" VerticalAlignment="Center"/>
</DataTemplate>
</telerikNavigation:RadColumn.CellTemplate>
</telerikNavigation:RadColumn>
<telerikNavigation:RadColumn x:Name="RadColumnSelected" PropertyName="Selected" Header="Selected">
<telerikNavigation:RadColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="" VerticalAlignment="Center"/>
</DataTemplate>
</telerikNavigation:RadColumn.CellTemplate>
</telerikNavigation:RadColumn>
<telerikNavigation:RadColumn x:Name="RadColumnExpanded" PropertyName="Expanded" Header="Expanded">
<telerikNavigation:RadColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="" VerticalAlignment="Center" />
</DataTemplate>
</telerikNavigation:RadColumn.CellTemplate>
</telerikNavigation:RadColumn>
</telerikNavigation:RadTreeListView.Columns>
</telerikNavigation:RadTreeListView>
_______
private void LoadData()
{
DataSource dt = new DataSource();
if (dt != null)
{
//Add Organization Name
this.RadTreeListView1.Items.Add(dt[0].Name);
for (int i = 0; i < dt[0].Departments.Count; i++)
{
//Add Departments Name into Organization ?????????????????? ADD IT INTO A PARENT NODE !!!
this.RadTreeListView1.Items.Add(dt[0].Departments[i].Name);
for (int j = 0; j < dt[0].Departments[i].Employees.Count; j++)
{
//Add Employees Name into Departments ?????????????????????? ADD IT INTO A PARENT NODE !!!
this.RadTreeListView1.Items.Add(dt[0].Departments[i].Employees[j].Name);
}
}
}
}
9 Answers, 1 is accepted
Rank 1
I think you don't need to create manually your Tree.
You can use your Datasource. You may only need to replace your List<T> by ObservableCollection<T> (It works for me).
| this.RadTreeListView1.ItemsSource = new DataSource(); |
Regards,
Florian
Rank 1
I replaced by System.Collections.ObjectModel.ObservableCollection, but I didn´t see correct information in RadTreeListView. Can you see my code example... and send for me your correct code , that works for you ? See my image.
Thanks.
this.RadTreeListView1.ItemsSource = new DataSource();
-------------------------
namespace RadTreeViewContainerBindings
{
public class DataSource : System.Collections.ObjectModel.ObservableCollection<Organization>
{
public DataSource()
{
Organization abc= new Organization("abc", false, true);
Department Developer = new Department("Deselvolvimento", false, true);
Department Marketing = new Department("Marketing", false, false);
abc.Departments.Add(Developer);
abc.Departments.Add(Marketing);
Developer.Employees.Add(new Person("1", true));
Developer.Employees.Add(new Person("2", false));
Developer.Employees.Add(new Person("3", false));
Marketing.Employees.Add(new Person("4", false));
Marketing.Employees.Add(new Person("5", false));
this.Add(abc);
}
}
}
Rank 1
An example with the same data model (3 nested collections) can be found in the telerik demo site :
http://demos.telerik.com/silverlight/#TreeView/HierarchicalTemplate
Thank you for your interest in the TreeListView.
First I want to underline that this is a CTP version of the control and a lot has not been implemented / fixed yet.
The control is meant for editing and viewing. In fact we aim to abstract the data manipulations well, so that it will be usable in many scenarios. It will eventually support multiple editing of items (similarly to when you select many items in Windows Explorer and edit their name).
The other novel thing is to represent the columns as just a collection of hierarchical items so that standard binding rules will apply there as well.
I am attaching the example that we used to make the Screenshots for the product page. It shows how you can implement editing. You can also take a look at the following online example:
http://demos.telerik.com/silverlight/#TreeListView/FirstLook
I understand that we have not provided documentation for the control yet, we are going to include documentation and more samples once it is officially released. Until then, my advice is to use the control as a preview only and not base any production code on it.
Of course we will be happy to help with any questions you may have. Your feedback will be appreciated.
Best wishes,
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.
Rank 1
I am quite interested in the sample you provided 157524-treelisttest-2.zip it's great and was wondering whether you
had a more general sample (instead of Folder/File/Diskbase ...items) with a more general hierarchical data struct from the database.
I am intending to use the TreeListView to allow administration to maintain a user-role based menu structure.
I used RadMenu to build a user-role based (Admin,Manager,AdvancedUser,Guest ... roles) menu. And for editing the user-role based
menu (CRUD) i believe that the treelistview is the best candidate. I intend to display the hierarchical menu structure as a treeview on the left hand side while on the right hand side there will be as many columns as there are as many roles displayed as selectable checkboxes/radiobuttons associated with the menu-item shown on the right hand side.
Many thanks
Dat
Currently the TreeListView is a CTP and I expect that you may run into issues with features that are simply not ready yet. The API of the control may also change a bit, although not drastically. So we would advice you to use RadGridView in order to accomplish the desired functionality.
Thank you for the interest in our controls. Any feedback is highly appreciate.
Best wishes,
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.
Rank 1
First, thank you for the example, it is so great.
Second, I have a question: where do you fill the Observable Collection for the TreeViewList Binding ?
In the Telerik Package Example you fill through a XML file. In your example through an ObservableCollection, but I don't find where you fill that ObservableCollections.
Thank you so much
The root items collection is created in the
GenerateItemsSource() method on the main user control.
Then each item creates its title and children on demand in the BuidTitle() and BuildChildrenI() respectively.
Hopefully this will help you,
All the best,
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.
Rank 1