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

Load TreeListView data

9 Answers 217 Views
TreeListView
This is a migrated thread and some comments may be shown as answers.
Fabiana
Top achievements
Rank 1
Fabiana asked on 18 Nov 2009, 10:09 AM

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

Sort by
0
Florian Perrichot
Top achievements
Rank 1
answered on 18 Nov 2009, 08:38 PM
Hi Fabiana,

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
0
Fabiana
Top achievements
Rank 1
answered on 19 Nov 2009, 09:53 AM
Hello Florian,

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);
   
        }


    }
}


   


0
Florian Perrichot
Top achievements
Rank 1
answered on 19 Nov 2009, 07:42 PM
It seems to works (you have the right object in the root of your tree). But now, you need to create the graphical part with some HierarchicalDataTemplate. I think you need at least one template for each type in your hierarchy.

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
0
Bobi
Telerik team
answered on 24 Nov 2009, 08:56 AM
Hi Florian Perrichot,

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.
0
Dat Huynh
Top achievements
Rank 1
answered on 04 Jan 2010, 03:43 AM
Hi Boryana,
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
0
Bobi
Telerik team
answered on 07 Jan 2010, 07:42 AM
Hello Dat Huynh,

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.
0
David Cardona
Top achievements
Rank 1
answered on 08 Apr 2010, 11:07 PM
HI.

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
0
Miroslav
Telerik team
answered on 13 Apr 2010, 04:26 PM
Hello David Cardona,

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.
0
David Cardona
Top achievements
Rank 1
answered on 13 Apr 2010, 05:06 PM
Thank you so much Admin for that response!


Tags
TreeListView
Asked by
Fabiana
Top achievements
Rank 1
Answers by
Florian Perrichot
Top achievements
Rank 1
Fabiana
Top achievements
Rank 1
Bobi
Telerik team
Dat Huynh
Top achievements
Rank 1
David Cardona
Top achievements
Rank 1
Miroslav
Telerik team
Share this question
or