Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TreeView > Horizontal Orientation at the one level only

• Dipti

  Posted on Jan 12, 2012 (permalink)

  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

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Jan 17, 2012 (permalink)

  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

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • TreeViewCustomPanels.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TreeView > Horizontal Orientation at the one level only