How to represent Model with TreeListView

[Mikel]

Hello.

 

I want to represent my model(see attached image) with TreeListView.

 

I have achieved to display process, work and drill instructions, but I dont know how to display Tasks and Programs.(see attached image)

 

A example of my hierachy maybe that:

ROOT(Process)
  |__ Process_1
                  |__ Process_1.1

                  |__ Drill
  |__ Work_2
                  |__ Task1
                  |__ Task2

 

 

 

 

 

[Mikel]

Sorry I posted it unfinished.

ROOT(Process)
  |__ Process_1
                  |__ Process_1.1
                         |__ Work 1.1.1

                               |__ Task 1
                  |__ Drill 1.2

                        |__ Program 1
  |__ Work_2
                  |__ Task1
                  |__ Task2

 

How can I solve It?

 

Thanks!

 

[Dilyan Traykov]

Hello Mikel,

As stated in the RadTreeListView vs RadGridView section of RadTreeListView's Getting Started article, you should use RadTreeListView only when you need to display homogeneous data. For heterogeneous data, you should use a Hierarchical RadGridView. You can then use RadGridView's ChildTableDefinitions and HierarchyChildTemplate to construct the desired hierarchy.

I hope you find the provided information helpful.

Regards,
Dilyan Traykov
Telerik

[Mikel]

Hello Dilyan,

 

I have achieved it do something similar, using RowDetails and RowDetailsTemplateSelector properties, to show or no RowDetails depending of the object type using in each row. (See attached image1)

 

Now, I want to generate the functionality of a tree but without being.

The idea is add Expander in rows that is not implemented default Expander, and add it manually if it is necessary. I have archieved it modifying the CellTemplate of the first collumn. To do it, I have added the Expander depending of the type of object.

 

Now I try to complete that goals.

• Goal 1: Change the icon used by the Expander to get the same appearance of the RadTreeViewList.   (See attached image2)
• Goal 2: Link the Visibility property of the RowDetails, with IsExpanded property of Expander from its row.  (See attached image3)

• Goal 3: Link object the Visibility property of the Expander, and depending of the the object’s properties, show or not the Expander.
  

  <telerik:RadExpander
        Grid.Column="0"
        Visibility="{Binding Path=., Converter={StaticResource
        ResourceKey=Instruction_To_Expander_Visibility},
        UpdateSourceTrigger=PropertyChanged}"
  />

  
  I have achieved using a converter. The problem is,  the view is not updated if any property from the object changed.
  What can I do for solve that problem? How can I advice to view when any property from the object  has changed?
  
  
• Goal 4: Get the width from left border to, right border of the Expander, and set that distance as row details left margin. It will simulate the indentation of TreeListView. (See attached image4)

I try different ways to achieve that goals, but I dont accomplish. Could you help me?

 

Thank you!

[Dilyan Traykov]

Hello Mikel,

I will try to target your questions one by one:

1) You can modify the ControlTemplate of the RadExpander in Blend to your liking as suggested in this forum thread. You could also replace the RadExpander with a RadGridView and modify its GridViewToggleButton ControlTemplate.

2) I can suggest having a look at this helpful blog post, explaining how to bind to the IsExpandable property of GridViewRow through an attached behavior.

3) I believe the suggestion from the last step should also be applicable here.

4) If you decide to use a RadGridView in your RowDetails template, I can offer the following approach, for setting it's left margin:

public MainWindow()
{
    InitializeComponent();
    this.clubsGrid.DataLoading += RadGridView_DataLoading;
}

private void RadGridView_DataLoading(object sender, GridViewDataLoadingEventArgs e)
{
    GridViewDataControl dataControl = (GridViewDataControl)sender;
    if (dataControl.ParentRow != null)
    {
        dataControl.ShowGroupPanel = false;
        dataControl.AutoGenerateColumns = false;

        dataControl.Margin = new Thickness(this.clubsGrid.Columns[0].ActualWidth, 0, 0, 0);
    }
}

I hope you find this information helpful.

Regards,
Dilyan Traykov
Telerik

[Mikel]

Thank you so much!

I have accomplished the first goal. I will try others...    :)

[Dilyan Traykov]

Hello Mikel,

I'm glad to hear you're making progress. I hope you manage to accomplish your other goals as well.

Regards,
Dilyan Traykov
Telerik