Rad Panel Bar not collapsing items

[Jessica]

I am having two problems. The first is that the items in my question/answer panel bar aren't collapsing when clicked. And it's allowing more than one item to be opened at a time even though I set it for single expand mode.

Second, when I click items in the category rad panel bar, they are not changing color when selected. I have the colors defined in my template, but it isn't picking it up.

The main part of the xaml file is below... let me know if you need the full code with the templates. Any help would be greatly appreciated! Thank you!

<UserControl x:Class="FAQSilverlight.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d" Width="700" d:DesignWidth="700" d:DesignHeight="220" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.Resources>
<DataTemplate x:Key="CategoryHeaderTemplate">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Category}" MinWidth="200" MaxWidth="200" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 5 5"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="QAHeaderTemplate">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Question}" MinWidth="460" MaxWidth="460" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="QATemplate">
            <StackPanel Orientation="Horizontal" >
                <telerik:RadPanelBar
                    HorizontalAlignment="Left"
                    Name="radChildPanelBar"
                    ExpandMode="Single"
                    VerticalAlignment="Top"
                    Style="{StaticResource RadPanelBarQAStyle}"
                    ItemClick="radChildPanelBarQA_ItemClick">
                    <telerik:RadPanelBarItem
                        Header="{Binding}"
                        HeaderTemplate="{StaticResource QAHeaderTemplate}"
                        TabNavigation="Once"
                        Style="{StaticResource RadPanelBarItemQAStyle}">
                        <TextBlock Text="{Binding Answer}" TextWrapping="Wrap" />
                    </telerik:RadPanelBarItem>
                </telerik:RadPanelBar>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="CategoryTemplate">
           <telerik:RadPanelBarItem Style="{StaticResource RadPanelBarItemCategoryStyle}" HeaderTemplate="{StaticResource CategoryHeaderTemplate}" Header="{Binding}" />
        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{Binding}">
        <telerik:RadExpander x:Name="qaExpander"
                             Style="{StaticResource RadExpanderQAContainerStyle}"
                             Collapsed="qaExpander_Collapsed"
                             IsEnabled="True">
            <telerik:RadPanelBar x:Name="radPanelBarQA"
                                 ExpandMode="Single"
                                 ItemContainerStyle="{StaticResource RadPanelBarItemQAStyle}"
                                 ItemTemplate="{StaticResource QATemplate}"
                                 Style="{StaticResource RadPanelBarQAStyle}"
                                 ItemClick="radChildPanelBarQA_ItemClick">

            </telerik:RadPanelBar>
        </telerik:RadExpander>
        <telerik:RadPanelBar x:Name="radPanelBar" Margin="0,31,0,0"
                             ItemTemplate="{StaticResource CategoryTemplate}"
                             Style="{StaticResource RadPanelBarCategoryStyle}"
                             ItemContainerStyle="{StaticResource RadPanelBarCategoryContainerStyle}"
                             ItemsSource="{Binding Path=PagedSource,ElementName=radPager}"
                             ExpandMode="Single"
                             IsExpandOnSingleClickEnabled="True"
                             IsEnabled="True"
                             IsExpandOnDblClickEnabled="False">
        </telerik:RadPanelBar>

        <telerik:RadDataPager PageIndexChanged="radPager_PageIndexChanged" x:Name="radPager" PageSize="5" Margin="0,0,0,180" Width="220" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Background="Transparent" BorderBrush="Transparent" />
    </Grid>

[Jessica]

I was able to fix my first problem with the panel items not collapsing by referring to this post http://www.telerik.com/community/forums/wpf/gridview/single-expand-mode-for-hierarchicalchildtemplates.aspx. But I still can't figure out why the background color will not change when the category is selected.

[Tina Stancheva]

Hello Jessica,

It isn't a good practice to place another RadPanelBar, neither a RadPanelBarItem inside the RadPanelBar ItemTemplates. Basically the ItemTemplate property is exposed to provide a DataTemplate controlling the visualization of the business objects bound to the control. So if you bind a list of 3 data items to the RadPanelBar control, they all will be wrapped in a RadPanelbarItem container and when you define an ItemTemplate for them, that contains a RadPanelBarItem - you will get a RadPanelBarItem container with another RadPanelBarItem inside it.

I believe all your issues are caused by this nesting of the controls. It is better to follow the approach described in this article to display hierarchical data inside the RadPanelBar control. This will allow you to implement your requirements out-of-the-box. You can also examine this demo.

Let us know if this information helps or if we can further assist you.

Greetings,
Tina Stancheva
the Telerik team