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

How to make the selected item in the radtreeview to have a style applied (or) to highlight the radtreeview selected item when a radpane is used?

2 Answers 140 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 28 Mar 2014, 06:46 AM
Code:

<UserControl.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="RadTreeViewItemControlTemplate1" TargetType="{x:Type telerik:RadTreeViewItem}">
<Grid x:Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">
<Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
<Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="0">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF8F6F9" Offset="0"/>
<GradientStop Color="#FFF0F0F0" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ResourceDictionary>
</UserControl.Resources>


<DockPanel>
<telerik:RadDocking x:Name="radDocking" Width="245" ConstraintAutoHideArea="False">
<telerik:RadSplitContainer x:Name="radSplitContainer">
<telerik:RadPaneGroup x:Name="radGroup">
<telerik:RadPane x:Name="radPane1" Header="Test" ContextMenuTemplate="{x:Null}" CanUserClose="False" CanFloat="False" Cursor="Hand">
<Grid>
<DockPanel LastChildFill="True">
<telerik:RadTreeView x:Name="radTreeView" DockPanel.Dock="Left" Background="#FF525152" VirtualizingPanel.IsVirtualizing="True">
<telerik:RadTreeView.Resources>
<Style TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="Template" Value="{StaticResource RadTreeViewItemControlTemplate1}" />
</Style>
</telerik:RadTreeView.Resources>
</telerik:RadTreeView>
</DockPanel>
</Grid>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking>
</DockPanel>A

After using the Radpane, the selected item is not having the style applied. If RadTreeView alone is used (without having radpane), the selected item in the radtreeview is having the style SelectionUnfocusedVisual which is working properly (i.e), Selected Item gets Highlighted. How to make the selected item in the radtreeview to have a style applied (or) to highlight the radtreeview selected item when a radpane is used?. Thanks.

2 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 01 Apr 2014, 04:23 PM
Hi John,

You may find attached a test project where your scenario works as expected. 
Some changes that I did to your scenario for it to work:
1. Added ContentControl to the RadTreeViewItemControlTemplate for the TreeView headers to be visualized.
2. I extended the MinHeight to 20pixels in the RadTreeViewItem style for better visibility of the Border you want to see when Selecting and moving away the Focus from the TreeViewItems
3. A sample TextBox control to grab the Focus from your control, so that you can observe the desired MultiTrigger change.

Could you please clarify that this is what you intended? If not - please give us steps to reproduce the unwanted behavior in the same project.

Regards,
Evgenia
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
John
Top achievements
Rank 1
answered on 04 Apr 2014, 12:23 PM
Hi Evegenia,

            First of all, I Thank You for your reply. 
            I found out the solution. That is we need to update the RadDocking layout once we selected the RadTreeViewItem.

            Solution:
     this.radDocking.UpdateLayout();

             I updated the RadDocking layout by writing the above code in the MouseLeftButtonUp event of RadTreeView control.

Regards,
John
Tags
TreeView
Asked by
John
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
John
Top achievements
Rank 1
Share this question
or