How do I get the data columns to appear to the right and only for the leaf nodes?

1 posts, 0 answers
  1. b
    b avatar
    9 posts
    Member since:
    Sep 2010

    Posted 11 Jan 2011 Link to this post

    Hi,

    I have hierarchical data and I'm trying to display it such that:
    - The tree branches sideways instead of downwards
    - The leaf nodes all line up if they have a certain parameter value in their DataContext
    - Multiple data columns are displayed and only visible for leaf nodes

    I used some styling and templates to achive the first point (actually a modified version of the example at http://www.telerik.com/help/silverlight/radtreeview-styles-and-templates-templated-nodes.html).

    I added an ItemPrepared event handler to my TreeListView entity to force the width of a node to be fixed if its a leaf (its DataContext has a certain parameter value), to achive the 2nd point.

    The last point is where I'm stuck...  When I add the data columns, their positioning is off (for my test I just tried adding two, in practice there will be multiple columns and will increase over time).  I need them to be horizontally adjacent to the nodes they represent and only be shown for the leaf nodes.

    I've attached screenshots to illustrate what I have so far, what I get when I try to add data columns and what I'm trying to achieve.

    I would greatly appreciate guidance on this.  My code is below for reference.

    Thanks!

    My style/template resources:
    <telerik:HierarchicalDataTemplate x:Key="Entity" ItemsSource="{Binding Entities}" telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}" >
        <StackPanel Orientation="Horizontal">
            <!--<Image Source="{Binding ImageUrl}" />-->
            <TextBlock Text="{Binding Name}" Margin="5, 5, 5, 5" />
        </StackPanel>
    </telerik:HierarchicalDataTemplate>
     
    <ControlTemplate TargetType="telerikNavigation:RadTreeViewItem" x:Key="TreeViewItemDefaultTemplate" >
        <Grid Margin="0" Height="Auto" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" x:Name="HeaderColumn" Width="Auto" HorizontalAlignment="Stretch">
                <Rectangle RadiusX="0" RadiusY="0" Stroke="#FF709FDA" StrokeLineJoin="Bevel"
                    StrokeThickness="1">
                    <Rectangle.Fill>
                        <LinearGradientBrush EndPoint="0.5,0.034" StartPoint="0.5,0.966">
                            <GradientStop Color="#FFE4E5F0" Offset="0" />
                            <GradientStop Color="#FFFFFFFF" Offset="1" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Border x:Name="SelectionVisual" Visibility="Collapsed"
                     BorderBrush="#FFA8C9D8" BorderThickness="1,1,1,1"
                     CornerRadius="3,3,3,3">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF00CCFF" Offset="0" />
                            <GradientStop Color="#FF9BB1FF" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border CornerRadius="2,2,2,2" BorderBrush="#FFFFFFFF"
                        BorderThickness="2">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#E5FFFFFF" Offset="0" />
                                <GradientStop Color="#33FFFFFF" Offset="1" />
                                <GradientStop Color="#4DFFFFFF" Offset="0.5" />
                                <GradientStop Color="#00FFFFFF" Offset="0.511" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                </Border>
                <StackPanel>
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center"
                        Margin="0">
                        <Image MaxWidth="25" MaxHeight="25" Stretch="Fill" x:Name="Image"
                            Source="{TemplateBinding DefaultImageSrc}" Margin="0" />
                        <ContentControl Name="Header" Padding="0"
                           Content="{TemplateBinding Header}"
                           ContentTemplate="{TemplateBinding HeaderTemplate}"
                           HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </StackPanel>
                    <ToggleButton x:Name="Expander" Margin="0,0,0,0"></ToggleButton>
                </StackPanel>
                <Rectangle x:Name="FocusVisual" RadiusX="3" RadiusY="3"
                     Visibility="Collapsed" Stroke="Black" StrokeThickness="0.75"
                     StrokeDashArray="1,2" IsHitTestVisible="False" />
            </Grid>
            <ItemsPresenter Grid.Column="1" x:Name="ItemsHost" Visibility="Collapsed" HorizontalAlignment="Stretch" />
        </Grid>
    </ControlTemplate>
     
    <Style TargetType="telerikNavigation:RadTreeViewItem" x:Key="TreeViewItemStyle">
        <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
        <Setter Property="IsExpanded" Value="True"></Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel HorizontalAlignment="Stretch" Margin="0,0"
                        Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
     
    <Style TargetType="ToggleButton" x:Key="ExpanderStyle" >
        <Setter Property="IsEnabled" Value="False" />
        <Setter Property="Height" Value="0" />
        <Setter Property="Width" Value="0" />
    </Style>


    My TreeListView definition (without data columns):
    <telerikNavigation:RadTreeListView x:Name="TreeEntity" ItemTemplate="{StaticResource Entity}" Background="Honeydew"
            HorizontalAlignment="Stretch" VerticalAlignment="Top"
            Grid.Row="0" ItemContainerStyle="{StaticResource TreeViewItemStyle}"
            IsExpandOnDblClickEnabled="False" IsExpandOnSingleClickEnabled="False"
            ExpanderStyle="{StaticResource ExpanderStyle}">
            <telerikNavigation:RadTreeListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel VerticalAlignment="Top" Orientation="Vertical" HorizontalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </telerikNavigation:RadTreeListView.ItemsPanel>
    </telerikNavigation:RadTreeListView>

    Now with data columns:
    <telerikNavigation:RadTreeListView x:Name="TreeEntity" ItemTemplate="{StaticResource Entity}" Background="Honeydew"
            HorizontalAlignment="Stretch" VerticalAlignment="Top"
            Grid.Row="0" ItemContainerStyle="{StaticResource TreeViewItemStyle}"
            IsExpandOnDblClickEnabled="False" IsExpandOnSingleClickEnabled="False"
            ExpanderStyle="{StaticResource ExpanderStyle}">
            <telerikNavigation:RadTreeListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel VerticalAlignment="Top" Orientation="Vertical" HorizontalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </telerikNavigation:RadTreeListView.ItemsPanel>
        <telerikNavigation:RadTreeListView.Columns>
            <telerikGridView:GridViewDataColumn Header="Name" />
            <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding NodeLevel}" Header="Name" />
        </telerikNavigation:RadTreeListView.Columns>
    </telerikNavigation:RadTreeListView>


    My data entity's stub:
    public class EntityHierarchy : ObservableCollection<EntityHierarchy>
    {
        public EntityHierarchy();
     
        public ToggleState CheckState { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
        public List<EntityHierarchy> Entities { get; set; }
        public string Id { get; set; }
        public string ImageUrl { get; set; }
        public bool IsExpanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
        public int NodeLevel { get; set; }
        public string Path { get; set; }
        public int SortOrder { get; set; }
        public string TypeId { get; set; }
    }

    The function which forces a node's width to be fixed:
    void TreeEntity_ItemPrepared(object sender, RadTreeViewItemPreparedEventArgs e)
    {
        if (e.PreparedItem.DataContext is EntityHierarchy)
        {
            EntityHierarchy eh = e.PreparedItem.DataContext as EntityHierarchy;
            if (eh.TypeId.Equals(PrimaryInstrumentTypeIds.STATUS, StringComparison.CurrentCultureIgnoreCase))
            {
                //e.PreparedItem.HorizontalAlignment = HorizontalAlignment.Right;
                e.PreparedItem.Width = 350;
            }
        }
    }
Back to Top