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

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

0 Answers 167 Views

TreeListView

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

This question is locked. New answers and comments are not allowed.

b asked on 11 Jan 2011, 11:24 PM

Without_Data_Columns.JPG

With_Data_Columns.JPG

This_Is_What_I_Want.JPG

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">

<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>

<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;

}