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:
My TreeListView definition (without data columns):
Now with data columns:
My data entity's stub:
The function which forces a node's width to be fixed:
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;
}
}
}