RadTreeView: HorizonalContentAlignment doesn't work

14 posts, 0 answers
  1. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 01 Jul 2011 Link to this post

    Hi,

    I am very frustrated as I am not being able to do simple tasks as align my RadTreeView contents.
    I would like to force the Header to align both in left and right sides (justified), but am not getting success with that.

    Basically here is my code:

    TreeViewItem myitem = new TreeViewItem();
    myitem.Header = lChoices[z].Application + ' - ' + lChoices[z].Hollnumber;
    myitem.Background = new SolidColorBrush(Colors.Orange);
     
    // the following line doesn't work - actually no matter what alignment I use, nothing changes
    myitem.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;
     
    mytreeview.Items.Add(myitem);

    Actually doesn't matter what horizontal alignment I choose, it always keep aligned at left.

    Any idea?

    Thanks!
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 06 Jul 2011 Link to this post

    Hello Yan Moura,

    I tried this code which works as expected at our side:
    <telerik:RadTreeView>
               <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Right" />
               <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Left" />
               <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Center" />
           </telerik:RadTreeView>
    I guess the problem is that you add a System.Windows.Controls.TreeViewItems in a RadTreeView which is not supported scenario. Please replace them with Telerik.Windows.Controls.RadTreeViewItems and let us know if this helps.


    Best wishes,
    Petar Mladenov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. DevCraft banner
  4. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 06 Jul 2011 Link to this post

    Hi Petar,

    Thanks for putting a light on it.

    I tried your sample and it worked fine. Now, I have an extra question still in the same subject.
    Doesn't it suppose to be able to JUSTIFY text (both left and right forced alignment) when using 'Stretch' style?

    Look what I have tried:
    <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Stretch"/>

    It simply aligns my text to left. Actually I am in the search for a way to align my header text left AND right (justified) by request of my boss!

    Could you point me any clue? Is this possible directly in the RadTreeView control? There is any workaround?

    Thanks a lot!

    Yan
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 11 Jul 2011 Link to this post

    Hi Yan Moura,

    You can place a TextBlock inside a ViewBox like so:
    <telerik:RadTreeViewItem >
                   <telerik:RadTreeViewItem.Header>
                       <Viewbox Width="500" Height="24" HorizontalAlignment="Stretch"  Stretch="Fill">
                           <TextBlock Text="Text To Test Stretching" />
                       </Viewbox>
                   </telerik:RadTreeViewItem.Header>
               </telerik:RadTreeViewItem>
    Please let us know if this could fit in your scenario.

    Regards,
    Petar Mladenov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 11 Jul 2011 Link to this post

    Hi Petar,

    Yes, your sample helped a LOT! Although I am doing it in the C# code behind and not directly in the XAML page, it was an excellent direction and I finally made it work. The hardest part was because I am an experienced coder but at the same time very fresh in SL that are being requested to step in this new ground doing complex stuff. Since I wasn't sure if SL controls (even native as well Telerik ones) could be nested and since I couldn't find any documentation in Google speaking specifically about this subject (believe me, I really searched!) I was practically convinced that I wouldn't be able to do that. Thanks to your help, I am on track again! :)

    Thanks a lot!

    Yan
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 12 Jul 2011 Link to this post

    Hello Yan Moura,

    Actually ViewBox is more often used for 2D Graphics instead of ordinary SL controls.
    Instead, you can also use s ScaleTransform to scale the TextBlock like so:
    <telerik:RadTreeView>
               <telerik:RadTreeViewItem>
                   <telerik:RadTreeViewItem.Header>
                       <TextBlock Text="Sample text to Expand">
                           <TextBlock.RenderTransform>
                               <ScaleTransform ScaleX="2" />
                           </TextBlock.RenderTransform>
                       </TextBlock>
                   </telerik:RadTreeViewItem.Header>
               </telerik:RadTreeViewItem>
           </telerik:RadTreeView>



    Kind regards,
    Petar Mladenov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  8. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 10 Oct 2014 Link to this post

    Hi,

    Can i edit tree view items using proposed method ?
    and can i use other events in tree view (Selected, Edited, SelectionChanged, SelectedItem) ?
  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 10 Oct 2014 Link to this post

    Hi Shalin,

    When you edit items, ItemEditTemplate (default one or your custom one) is being applied and it replaces the Header object. Basically, there should be no issues with the mentioned approach. Same is true for the mentioned  events - SelectionChanged, Edited, etc. Please let us know if you experience any specific difficulties.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 10 Oct 2014 Link to this post

    Hi,
    Thank you vary much for the quick reply. But using previously mentioned approach and below approach nothing happens. Items in tree can not move to left most side. (Streth and Left both use)
    <telerik:RadTreeView>
    <telerik:RadTreeView.ItemContainerStyle>
                                <Style TargetType="telerik:RadTreeViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                </Style>
                            </telerik:RadTreeView.ItemContainerStyle>
                            <telerik:RadTreeView.Items>
                                <Style TargetType="telerik:RadTreeViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                </Style>
                            </telerik:RadTreeView.Items>
    </telerik:RadTreeView>

  11. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Oct 2014 Link to this post

    Hi Shalin,

    Could you please try setting HorizontalAlignment = Left on the RadTreeView and let us know if this is what you need to achieve. Below you can see captured picture of how the items align left with this setting.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 20 Oct 2014 in reply to Petar Mladenov Link to this post

    i want to align items in tree into left most side of the tree. here is the code
    <navi:RadTreeView x:Name="rdtreeTags" SelectedItem="{Binding Tags_CustmFldDetails.SelectedTag, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                        IsEditable="True" HorizontalContentAlignment="Stretch"
                        ItemsSource="{Binding Tags_CustmFldDetails.TagsList, Mode=TwoWay}"
                         SelectionChanged="rdtreeTags_SelectionChanged"  DisplayMemberPath="TagName" Selected="rdtreeTags_Selected"
                        SelectionMode="Single" Edited="rdtreeTags_Edited" EditStarted="rdtreeTags_EditStarted" Margin="77,10,241.433,658" BorderThickness="1" BorderBrush="Green">
                            <telerik:RadTreeView.ItemContainerStyle>
                                <Style TargetType="telerik:RadTreeViewItem">
                                    <Setter Property="HorizontalAlignment"  Value="Left"/>
                                </Style>
                            </telerik:RadTreeView.ItemContainerStyle>
                            <telerik:RadTreeView.Items>
                                <Style TargetType="telerik:RadTreeViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                </Style>
                            </telerik:RadTreeView.Items>
                             
                        </navi:RadTreeView>

    And i also add screen shot,
  13. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 22 Oct 2014 Link to this post

    Hello Saw,

    Could you please confirm you want to remove the space on the left of every RadTreeViewItem ? Basically this space is for the toggle button which appears if the item has child items. In order to remove this space you need to edit the default ControlTemplate of the RadTreeViewItem.
    On a side note, there are fe mistakes in your code snippet. You use both Items and ItemsSource property of the RadTreeView which won't work. You must use either Items (declarative population) or ItemsSource (databinding approach). Also, you cannot place Style in the ItemsCollection.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 22 Oct 2014 in reply to Petar Mladenov Link to this post

    Thank you very much for the info. but I added this Items for just testing. Could you please give me a quick tip on edit tree default controller template for remove toggle button ? I don't have any child items.
  15. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 23 Oct 2014 Link to this post

    Hi Saw,

    Attached you can find an example with the extracted template of the RadTreeViewItem. Below you can find the difference I introduced:
    <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="0" Width="0">
    Orginally this Grid is:
    <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="21" >

    Let us know if this is what you needed.

    Furthermore, if you aim to use a flat (non hierarchical RadTreeView) you can consider using our RadListBox. It's virtualization is faster than the RadTreeView's one.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner