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

Hiding the Parent node from RadTreeView

13 Answers 595 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
shashank
Top achievements
Rank 1
shashank asked on 21 Mar 2018, 12:49 PM

Hi,

In my application, we have used RadTreeView to show the hierarchical data.

The structure is like this:

-Parent

 -Parent1

   -Child1

   -Child2

 -Parent2

   -Child1

-Parent

I want to hide the Parent1 node. 

We can achieve this by templating and hiding the HeaderRow. But the problem is all the underlying children are also getting hidden.
I want to keep all the children still visible.
Also, I want to make this Parent1 visible/hidden as per user action.

Please let me know how I can achieve this.

13 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 22 Mar 2018, 02:48 PM
Hello Shashank,

I can suggest you two approaches for your case.
  • The first one is to bind the Visibility property of the Grid element with x:Name="HeaderRow" that is defined in the ControlTemplate of RadTreeView. To do this you can extract the template and modify it a bit. I attached a project showing this approach. I am using an attached property to sync the model with the treeviewitem. 
  • The second approach is to add and remove the root element from the ItemsSource of the treeview when you want to show/hide it.
I hope that helps.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
shashank
Top achievements
Rank 1
answered on 27 Mar 2018, 01:50 PM

Hi Martin,

Thanks for the quick response.

I used the Header Row visibility approach and it is working fine.
But I came across one scenario which is not behaving correctly.

When we collapse the RadTreeViewItem; visibility of ItemsHost present in the RadTreeView is changing to collapsed.
Now in this case, if I am hiding the header row immediate children are not visible as the ItemsHost is collapsed.

Is there a way to avoid this?
I tried setting Visibility of ItemsHost to visible in this particular case but it didn't work.
I used below triggers:

To Hide Header Row:

<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=DataContext.ShowServiceGroup}" Value="false">
                <Setter Property="Visibility" TargetName="HeaderRow" Value="Collapsed"/>
                <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible" />
</DataTrigger>

To make ItemsHost visible:

<Trigger Property="Visibility" SourceName="HeaderRow" Value="Collapsed">
                <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible" />
</Trigger>

 

Pleae help me in this scenario.

0
shashank
Top achievements
Rank 1
answered on 27 Mar 2018, 01:57 PM

In the sample application, you have given we can reproduce my scenario.

Just collapse the "Root" node and then check-uncheck the "Is Root Visible" checkbox.

When you uncheck you won't see anything.
In uncheck case, I explicitly want to make the below hierarchy visible.

Could you please let me know the solution for this.

0
shashank
Top achievements
Rank 1
answered on 27 Mar 2018, 02:16 PM

Some additional info on this : 

What we want to achieve is when the HeaderRow is not expanded (child are not visible) and we make it collapsed. 
ItemsPresenter (which hold the child node) of RadTreeView should get visible.

0
Martin Ivanov
Telerik team
answered on 29 Mar 2018, 12:46 PM
Hello Shashank,

To achieve your requirement you can set the IsExpanded property of the treeview item to True. This will make the items host visible. I updated my project to show this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
shashank
Top achievements
Rank 1
answered on 11 May 2018, 09:37 AM

Hi Martin,

Thanks your solution worked for me.

Though now with this I am facing one weird behavior.

Sometimes few child nodes are getting hidden automatically.
I am not setting visibility for these nodes. They are always visible.

But in few cases (expand) I can not see them and still they take place on screen.

I have attached a screenshot in which you can check the issue.
Also, I have attached the template we are using for RADTreeViewItem.

Could you please help regarding this.

 

 

0
Martin Ivanov
Telerik team
answered on 11 May 2018, 09:55 AM
Hello Shashank,

I can't be sure why this issue occurs, but I could suggest you to double check if the Visibility of the RadTreeViewItems is set somewhere in your application. If so, you can replace it with ItemVisibility which is more reliable for the treeview items.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
shashank
Top achievements
Rank 1
answered on 14 May 2018, 01:45 PM

Hi Martin,

I cross-checked in the application and i am sure that we are not setting visibility anywhere.

Though I dug into more and found one thing.
This behavior is only reproducible when the virtualization of the tree view is on.
If I switch off the virtualization this behavior is not visible.

Please let me know your views how can I eliminate this completely.

 

0
shashank
Top achievements
Rank 1
answered on 15 May 2018, 10:57 AM
https://www.telerik.com/forums/hiding-the-parent-node-from-radtreeview?actionMode=replyThread#iDcX8nhJk0ulaIrJcAuooQ


Shashank Mishra
Tue 5/15/2018 4:23 PM
Inbox; Sent Items

To:
Shashank Mishra;


Hi Martin,

I am able to reproduce the issue on the sample you gave me.
You just need to set property IsVirtualizing="True" for tree view.

Once this property is set do following steps:
1. Launch the application. Do not maximize it. Let it be in the same size as it is launched in.
2. Collapse all the tree items.(Item 0, Item 1,Item 2).
3. Hide the root node using checkbox.
4. Now expand the Item 1 node. You will be able to see the children of Item 1 as well as Item 0 and Item 2 nodes.
5. Now expand Item 0.

After step#5 you will be able to see the issue.
Only Item 0 and its children are visible. Item 1 will be visible but all of its children will not be visible also Item 2 is completely gone.

This is the issue I am facing.
If you just remove the IsVirtuaizing property everything will work smooth.

Could you please advices us how to solve this issue.
0
shashank
Top achievements
Rank 1
answered on 17 May 2018, 03:44 AM

Hi Martin,

Could you please have a look at this issue and suggest us solution for this.
It is urgent for us.

0
Martin Ivanov
Telerik team
answered on 17 May 2018, 07:28 AM
Hello,

Thank you for the detailed report. I was able to reproduce the issue. It turns out that hiding the header of an item does not work properly when the virtualization is enabled. This is because panel that arranges the treeview item relies on that all elements in the template of the items will be measured properly. To resolve this you can use Visibility.Hidden instead of Visibility.Collapsed which uses the BooleanToVisibilityConverter. In this case you will need to implement custom converter. Here is an example in code:
public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Visibility.Visible : Visibility.Hidden;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The other approach which you can try is to remove the root item from the ItemsSource of RadTreeView when you want to hide it. Or alternatively, re-populate the treeview with different sources. I updated my last project to show this approach. I hope that helps.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
shashank
Top achievements
Rank 1
answered on 21 May 2018, 12:26 PM

Hi Martin,

Thanks for the reply.
I tried your first solution but that's not the behavior we want.
If we only hide the header row then it leaves a blank space in the hierarchy. 
This is not our desired behavior.

On your second solution :
There are few issues for us :
1. We are binding 20k nodes to the tree view.
2. The same data structure is used for internal processing also. I can not remove the nodes from the data structure. This will impact existing functionality. 
3. Creating a duplicate data structure to just bind it to tree view to hide/show the node will result in performance impact.
4. Also handling these two data structures and keeping them in sync will be difficult.

Please let me know your views.
Also if you have any other easy way out.

0
Martin Ivanov
Telerik team
answered on 24 May 2018, 08:56 AM
Hello,

To avoid the blank space when you hide the header row, you can apply a margin for the entire RadTreeView control that will offset it top and left. For example:
this.treeView.Margin = new Thickness(-20, -20, 0, 0);

As for the other approach with replacing the root, instead of populating the treeview with the root from the original data structure, you can duplicate the data. But not copying it. Instead, you can copy only the root element and set its children collection to the children collection of the original root. This way you won't need to make a copy of each separate item, but only provide a reference to the original collection.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Tags
TreeView
Asked by
shashank
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
shashank
Top achievements
Rank 1
Share this question
or