This is a migrated thread and some comments may be shown as answers.

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

0 Answers 92 Views
TreeListView
This is a migrated thread and some comments may be shown as answers.
b
Top achievements
Rank 1
b asked on 11 Jan 2011, 11:24 PM
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;
        }
    }
}

No answers yet. Maybe you can help?

Tags
TreeListView
Asked by
b
Top achievements
Rank 1
Share this question
or