Rad Panel Bar not collapsing items

3 posts, 0 answers
  1. Jessica
    Jessica avatar
    12 posts
    Member since:
    Aug 2011

    Posted 23 Sep 2011 Link to this post

    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:vsm="clr-namespace:System.Windows;assembly=System.Windows"
            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>

  2. Jessica
    Jessica avatar
    12 posts
    Member since:
    Aug 2011

    Posted 23 Sep 2011 Link to this post

    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.
  3. DevCraft banner
  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 28 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top