Need Help on RadPanelBar Control

[Saranya]

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.
 

[Saranya]

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.

 

 

 

[Petar Mladenov]

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

[Saranya]

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.

[Saranya]

Hi Peter,

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

[Petar Mladenov]

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

[Jessica]

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.

[Petar Mladenov]

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