[Solved] Horizontal Orientation at the one level only

[Dipti]

Hi,

I have a treeview which has vertical orientation at all levels except the first level (i.e. one level from root). I have not defined my treeview items in XAML, the data is loaded through C# (i.e. RadTreeViewItems are generated dynamically). 

I want that Counties and Regions should have vertical orientation whereas Continents should have horizontal orientation.

-All Regions
    -Continent1                        -Continent2
            - Region1                           -Region2 
                -Country1                          -Country5 
                -Country2                          -Country6
                -Country3                           -Country7      
                -Country4                           -Country9
                -Country8                           -Country10
            - Region4                            -Region3
                -Country1                            -Country2      
                -Country3                            -Country4      
                -Country5                            -Country6
                -Country7                            -Country8      
            - Region5                            -Region6
                -Country11                            -Country12      
                -Country13                            -Country14  

Is this possible when we are using HierarchicalDataTemplate?

Please see my code below.

<UserControl.Resources>
<telerik:HierarchicalDataTemplate x:Key="allRegionsTemplate"
    ItemsSource="{Binding Continents}"
    telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}">
    <TextBlock Text="{Binding Name}"/>
</telerik:HierarchicalDataTemplate>

<telerik:HierarchicalDataTemplate x:Key="continentTemplate"
        ItemsSource="{Binding Regions}"
        telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}"/>
        </StackPanel>
    </telerik:HierarchicalDataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="regionTemplate"
        ItemsSource="{Binding Countries}"
        telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}">
        <TextBlock Text="{Binding Name}"/>
    </telerik:HierarchicalDataTemplate>

    <DataTemplate x:Key="countryTemplate"
        telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}">
        <TextBlock Text="{Binding Name}"/>
    </DataTemplate>

    <local:ThreeLevelTemplateSelector x:Key="ThreeLevelTemplateSelector"
         AllRegionsTemplate="{StaticResource allRegionsTemplate}"
       ContinentTemplate="{StaticResource continentTemplate}"
        RegionTemplate="{StaticResource regionTemplate}"
        CountryTemplate="{StaticResource countryTemplate}" />
</UserControl.Resources>

<telerikNavigation:RadTreeView x:Name="treeView" Grid.Column="1" Grid.Row="1"
 HorizontalAlignment="Left"
 VerticalAlignment="Top"
 ItemTemplateSelector="{StaticResource ThreeLevelTemplateSelector}"
 IsOptionElementsEnabled="True"
 ItemsOptionListType="CheckList"
 IsTriStateMode="True"
 SelectionMode="Multiple"
 Checked="treeView_Checked"
 Unchecked="treeView_Unchecked" />

The Data is loaded from C# using a list:
this.treeView.ItemsSource = List;

 
Thanks.
~Dipti

[Petar Mladenov]

Hi Dipti,

 I prepared a solution for you which demonstrates a possible approach. Basically, I have a boolean property in My ViewModel that is bound to the Style property of the RadTreeViewItem via converter. When it is se to True, the corresponding Style sets Horizontal StackPanel for the ItemsPanelTemplate of the RadTreeViewItem.
Please let us know if you need further assistance.

All the best,
Petar Mladenov
the Telerik team