Why treeview shifts the second row child outside the column (shifts right)?

2 posts, 0 answers
  1. ss
    ss avatar
    8 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    I have situtation where i have 4 rows and 3 columns where third row contains a tree (which must show child only in third row of first column) and which must show all the data properly vertically alligned (exactly below other, not left or right) in other columns as well. Like this:  (see tr2 image).

    But actually its not working like this it shifts the column in bit right (because of child cover some area and the data in second column and third column is shifted to right with the same distance). Here is the view (showing the gridlines of row and column). See this: (tt2 image)

    You can see in the image that in Second Row "Clearing Prices" click i have a shift of "Launch Step" (column 3) in right. That i want to allign just below each otherMy code to do this is:
    <telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
                        <Grid ShowGridLines="True" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
     
                                //These rows are to show you gridlines shift
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                      
     
                             //these are the tree columns data (first two cvontains text and third one contains a button)
                           <TextBlock Grid.Column="0" Text="{Binding Label}" FontWeight="Bold" Margin="10" Height="23" Width="400" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="{Binding Status, Converter={StaticResource EODStatusFGConverter}}"/>
                           <TextBlock Grid.Column="1" Text="{Binding StatusLabel}"   Margin="10" Height="23" Width="170" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="{Binding Status, Converter={StaticResource EODStatusFGConverter}}"/>
                           <Button Content="{Binding ButtonLabel}" Grid.Column="2" VerticalAlignment="Center"  Style="{StaticResource ButtonStyle_Blue}" Padding="5" Margin="10" HorizontalAlignment="Right"  Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" IsEnabled="{Binding StepEnabled}" Command="{Binding ButtonStepCommand}"/>
     
                        </Grid>
                    </telerik:HierarchicalDataTemplate>
                </telerik:RadTreeView.ItemTemplate>
            </telerik:RadTreeView>

    In my xaml code I have "RelatedItems" which binds the child of "Clearing Prices like"Equities, Bonds, Futures etc." whereas "EODDataStepsCollection" contains "Conversion Rates, Clearing Prices, Portfolio Evaluations".Why this shift in right of Buttons of 3rd column ("Launch Steps") arises. How to sove this problem ?

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 18 Sep 2014 Link to this post

    Hi,

    RadTreeView is designed so that the children of a specific treeview item to be shifted to the right of their parent. In general it acts like the tree view in Windows Explorer for example. This shift is controlled with a Margin set on the elements in the visual tree. RadTreeView exposes ItemIndent property that controls the indent (the margin) of the items which you can use to remove the shifting.

    If you set the ItemIndent to 0 all items will be vertically aligned regardless their level. The default indent is 20.
    <telerik:RadTreeView ItemsIndent="0" />

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
Back to Top