How To Wrap RadTreeView without Horizontal Scrollbar

7 posts, 0 answers
  1. Naren
    Naren avatar
    53 posts
    Member since:
    Aug 2010

    Posted 15 Sep 2010 Link to this post

    I am using RadTreeView with fixed width.
    I am using TextBlock in ItemTemplate to Wrap the text, and I need to give MaxWidth to textBlock so that it can wrap....and it do wrap........

    But when I expand my tree to great extent to deep child level then  it cuts as in attached file.

    How can i solve this problem......Can  anyone help me urgently please....
    Thank you in advance,,,,,


  2. Naren
    Naren avatar
    53 posts
    Member since:
    Aug 2010

    Posted 15 Sep 2010 Link to this post

    can anyone help on above post???
  3. DevCraft banner
  4. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 16 Sep 2010 Link to this post

    Hi Naren,

     You can try with the following code. It is not much elegant, but is should work.

    private void tree_ItemPrepared(object sender, RadTreeViewItemPreparedEventArgs e)
    {
        e.PreparedItem.SizeChanged += new SizeChangedEventHandler(item_SizeChanged);
    }
     
    void item_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        var item = sender as RadTreeViewItem;
        var point = item.TransformToVisual(tree).Transform(new Point(0, 0));
        item.Width = tree.ActualWidth - point.X - 30;
    }

    The point is where the item is placed, so we make the item width the rest of the space that is available on it's right.
    Hope this help you.

    All the best,
    Miro Miroslavov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Naren
    Naren avatar
    53 posts
    Member since:
    Aug 2010

    Posted 17 Sep 2010 Link to this post

    Hi Miro
     it is not working...
    can you please provide any other solution???
  6. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 23 Sep 2010 Link to this post

    Hi Naren,

     Can you please find the attached project and let me know exactly what is not working there.
    Thank you for your cooperation.

    Greetings,
    Miro Miroslavov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Naren
    Naren avatar
    53 posts
    Member since:
    Aug 2010

    Posted 28 Sep 2010 Link to this post

    Hi Miro,
    Thanx for your reply
    but its not working in my case because you  have only 1 textBlock in TreeView DataTemplate but i have 2 textBlock and 1 image.....In 1st TextBlock i am showing Hierarchy numbers and in 2nd i m showing actual data....

    Can you provide any other way for this :

     <telerik:HierarchicalDataTemplate x:Key="TreeViewItemTemplate"
    ItemsSource="{Binding Items}"
                    
    telerik:ContainerBinding.ContainerBindings="{StaticResource
    ContainerBindings}"   >
                <StackPanel Orientation="Horizontal"  >
                   <Image
    Source="Images/CapabilityCubeGreen.png" Height="16"
    VerticalAlignment="Top"  ></Image>
                    <!--<TextBlock Text="  " />-->
                    <TextBlock Text="{Binding DisplayHierarchy}"
    FontSize="10" TextWrapping="Wrap" MaxWidth="100" Height="Auto"
    VerticalAlignment="Top"  />
                    <TextBlock Text="  " VerticalAlignment="Top" />
                    <TextBlock Text="{Binding Text}" FontSize="10"  
    TextWrapping="Wrap" MaxWidth="120" Height="Auto"   />
                   
                </StackPanel>
            </telerik:HierarchicalDataTemplate>
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 30 Sep 2010 Link to this post

    Hello Naren,

    Thank you for the clarification. I modified the project accordingly but there are a couple of things I want to point out.

    First of all, instead of inserting an Image in the ItemTemplate, it would be better to use the DefaultImageSource property of the RadTreeView. Here you can find more info about this feature.

    Also, you can insert the TextBlocks into a WrapPanel, like so:

    <telerik:HierarchicalDataTemplate x:Key="hierarchy" ItemsSource="{Binding Items}" >
        <telerik:RadWrapPanel Orientation="Horizontal" >
            <TextBlock Text="{Binding DisplayHierrarchy}"
                               FontSize="10" TextWrapping="Wrap" MaxWidth="100" Height="Auto"
                               VerticalAlignment="Top"  />
            <TextBlock Text="{Binding Text}" FontSize="10" 
                               TextWrapping="Wrap" MaxWidth="120" Height="Auto"   />
        </telerik:RadWrapPanel>
    </telerik:HierarchicalDataTemplate>
    However, please keep in mind that the WrapPanel will wrap its content - the TextBlocks, but if there isn't enough space to display both TextBlocks, the second one will be moved to the second row.

    Therefore in order to implement the treewrapping.jpg view of the RadTreeView, you will have to concatenate both strings - DisplayHierrarchy and Text in one string property and bind a single TextBlock in the RadTreeView ItemTemplate to that property. 

    I hope this info helps. Let us know if we can further assist you.

    Sincerely yours,
    Petar Mladenov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner