Home / Community & Support / Developer Productivity Tools Forums / WPF > PanelBar > Need Help on RadPanelBar Control

• Saranya

  Posted on Nov 1, 2010 (permalink)

  Hi,
    I am working on dynamic loading of RadPanelBar Control. I am having a collections where 2 levels of topics would be there
  The data would be in the below format
  Id             Name             ParentCategoryID     LEVEL
  19741         A                         19737                         1
  19749         B                         19737                         1
  19750         C                         19749                         2
  19772         D                         19749                         2
  19742         E                         19741                         2
  19743         F                         19741                         2
  19744         G                        19741                         2
  I want to bind the Level 1 data in the parent level and Level 2 data with whose parentid matches with the id will be displayed as the child level
  Eg) A and B are at the parent levels.
  C,D will be displayed under B and E,F,G will be displayed under A
  I created the following template to display this
  
  

  <telerik:RadPanelBar x:Name="pnlTopic" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Vertical" ExpandMode="Single" telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True" ItemsSource="{Binding Topics}" SelectedItem="{Binding SelectedTopic}">

                                            <telerik:RadPanelBar.ItemTemplate>

                                                <DataTemplate>

                                                    <telerik:RadPanelBarItem Header="{Binding Name}" IsSelected="True" IsExpanded="{Binding DataContext.IsExpanded,ElementName=pnlTopic}" x:Name="pnliTopic" >

                                                        <ListBox x:Name="lstSubTopics" ItemsSource="{Binding DataContext.SubTopics,ElementName=pnlTopic}">

                                                            <ListBox.ItemTemplate>

                                                                <DataTemplate>

                                                                    <TextBlock Text="{Binding Name}" Margin="2" FontWeight="SemiBold" />

                                                                </DataTemplate>

                                                            </ListBox.ItemTemplate>

                                                        </ListBox>

                                                    </telerik:RadPanelBarItem>

                                                </DataTemplate>

                                            </telerik:RadPanelBar.ItemTemplate>

                                            <i:Interaction.Triggers>

                                                <i:EventTrigger EventName="SelectionChanged">

                                                    <i:InvokeCommandAction Command="{Binding AccordionSelectionChange}" CommandParameter="{Binding Item}"/>

                                                </i:EventTrigger>

                                            </i:Interaction.Triggers>

                                        </telerik:RadPanelBar>

  
  I am getting the topics correctly and I was not able to filter the second level elements since the selecteditem for RadPanelBar always return null values(I'm using MVVM model). Also I was not able to expand the radpanelbar items in design. Should i need to add code for that? i want to expand the selected element. please respond me asap.
  
  Regards,
  R.Saranya.
   

  Reply

• Saranya

  Posted on Nov 2, 2010 (permalink)

  Hi,
       I am waiting for ur reply to proceed further. please help. I solved my previous issue and right now i got struck with expanding and collapsing the panelbaritem
  
  i used the IsSelected property of RadPanelBarItem to set through MVVM. The setter property never gets called. I want to expand my panelbaritems only if it is selected. How to achieve this? I am binding data to my items dynamically. please refer the code below.  I tried with SelectedItem of PanelBar but no luck.
  
  

   

  <telerik:RadPanelBar x:Name="pnlTopic" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Vertical" ExpandMode="Single" telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True" ItemsSource="{Binding Topics}"> 

    

    

    

  <telerik:RadPanelBar.ItemTemplate> 

    

    

  <DataTemplate> 

    

    

  <telerik:RadPanelBarItem Header="{Binding Name}" IsSelected="{Binding IsSelectedValue,ElementName=pnliTopic}" IsExpanded="{Binding IsExpandedValue,ElementName=pnliTopic}" x:Name="pnliTopic" > 

    

    

  <!--IsSelected="{Binding IsSelectedValue,ElementName=pnliTopic}" IsExpanded="{Binding IsExpandedValue,ElementName=pnliTopic}"--> 

    

    

  <ListBox x:Name="lstSubTopics" ItemsSource="{Binding DataContext.SubTopics,ElementName=pnlTopic}" SelectedItem="{Binding DataContext.SelectedSubTopic,ElementName=pnlTopic}"> 

    

    

  <ListBox.ItemTemplate> 

    

    

  <DataTemplate> 

    

    

  <TextBlock Text="{Binding Name}"/> 

    

   </DataTemplate> 

    

   </ListBox.ItemTemplate> 

    

   </ListBox> 

    

   </telerik:RadPanelBarItem> 

    

   </DataTemplate> 

    

   </telerik:RadPanelBar.ItemTemplate> 

    

   <i:Interaction.Triggers> 

    

   <i:EventTrigger EventName="SelectionChanged"> 

    

   <i:InvokeCommandAction Command="{Binding AccordionSelectionChange}" CommandParameter="{Binding SelectedItem, ElementName=pnlTopic}"/> 

    

   </i:EventTrigger> 

    

   </i:Interaction.Triggers> 

    

   </telerik:RadPanelBar>

  Please help
  Saranya.

   

   

   

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Nov 2, 2010 (permalink)

  Hello Saranya,
  
  I prepared a sample project for you that demostrates a common way to bind the RadPanelBar to a hierarchical data object. Unfortunately , I didn`t understand the functionality you are trying to achieve since by default a RadPanelBarItem is selected and expanded on a single mouse click.  Can you please elaborate on the behavior you want. We would be glad to assist you further.
  
  Kind regards,
  Petar Mladenov
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Attached files

  • panelbarexpandwhenselected.zip

  Reply

• Saranya

  Posted on Nov 3, 2010 (permalink)

  Hi Peter,
  
               Your sample Project helped me a lot in solving my issue. Thanks a lot. I will keep you posted in case of clarifications.
  
  Regards,
  R.Saranya.

  Reply

• Saranya

  Posted on Nov 3, 2010 (permalink)

  Hi Peter,
  
                 How to set Margin between the radpanelbaritems. If i apply Margin to RadPanelBarItem, I am getting space within the RadPanelBarItems.

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Nov 8, 2010 (permalink)

  Hello Saranya,
  
  I did not understand exactly what you have in mind , but setting a margin on the RadPanelBarItems should look like so:
  
  

  <Style TargetType="telerik:RadPanelBarItem" x:Key="panelbarItemStyle">

             <Setter Property="IsSelected" Value="{Binding IsSelectedValue, Mode=TwoWay}" />

             <Setter Property="Margin" Value="0 2 0 2" />

         </Style >

  
  ( Supposing you are using the last attached project ).
  
  Hope this has helped you. I it hasn`t , please try to be more precise on the visual appearance you want.
  
  Kind regards,
  Petar Mladenov
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Jessica

  Posted on Oct 17, 2011 (permalink)

  I am setting up my data source in a similar fashion and I want to be able to have the first item in the list expanded on load. I can programmatically select the first item, but I can't get it to expand. I am trying to do something like this:
  
  lstTopics.SelectedItem = Topics[0]; // this works and selects the first item, but does not expand it
  
  lstTopics.Items[0].IsExpanded = true; //this isn't a valid line of code. How can I accomplish this?
  
  I tried lstTopics.SelectedContainer.IsExpanded = true; but the SelectedContainer property is null.
  

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Oct 20, 2011 (permalink)

  Hi Jessica,

   Probably the Selection needs time in order to take effect so that the SelectedContainer won't be null. You can try to set the expansion like so:

  Dispatcher.BeginInvoke(new Action(()=>lstTopics.SelectedContainer.IsExpanded = true;)))

  Another approach that you can try is to bind the IsExpanded property of the RadPanelBarItem to the Selected (boolean property from the ViewModel that is bound to the IsSelected of RadPanelBarItem) via Style bindings.
  Please let us know if this helps you.Regards,
  Petar Mladenov
  the Telerik team

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > PanelBar > Need Help on RadPanelBar Control