Need Help on RadPanelBar Control

8 posts, 0 answers
  1. Saranya
    Saranya avatar
    9 posts
    Member since:
    Oct 2010

    Posted 01 Nov 2010 Link to this post

    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.
     
  2. Saranya
    Saranya avatar
    9 posts
    Member since:
    Oct 2010

    Posted 02 Nov 2010 Link to this post

    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.

     

     

     

  3. UI for WPF is Visual Studio 2017 Ready
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 02 Nov 2010 Link to this post

    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
  5. Saranya
    Saranya avatar
    9 posts
    Member since:
    Oct 2010

    Posted 03 Nov 2010 Link to this post

    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.
  6. Saranya
    Saranya avatar
    9 posts
    Member since:
    Oct 2010

    Posted 03 Nov 2010 Link to this post

    Hi Peter,

                   How to set Margin between the radpanelbaritems. If i apply Margin to RadPanelBarItem, I am getting space within the RadPanelBarItems.
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Nov 2010 Link to this post

    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
  8. Jessica
    Jessica avatar
    12 posts
    Member since:
    Aug 2011

    Posted 17 Oct 2011 Link to this post

    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.
  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 20 Oct 2011 Link to this post

    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 >>

Back to Top
UI for WPF is Visual Studio 2017 Ready