How to set the default selected item of RadPanelBar in MVVM?

4 posts, 2 answers
  1. Vivek
    Vivek avatar
    33 posts
    Member since:
    Oct 2012

    Posted 29 Nov 2012 Link to this post

    I have created a RadPanelBar with two items. I want the DefaultItem to be selected by default. How can I do that dynamically?
    Below is the xaml code for RadPanelBar

    <
    telerik:RadPanelBar x:Name="mybar" Width="252" Height="500" HorizontalAlignment="Left"  VerticalAlignment="Top" ExpandMode="Single" Margin="0,58,0,0" SelectedItem="{Binding PanelBarItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    <telerik:RadPanelBarItem x:Name="DefaultItem" >
                        <telerik:RadPanelBarItem.Header>
                            <TextBlock Text="Default Item" />
                        </telerik:RadPanelBarItem.Header>
                    </telerik:RadPanelBarItem>
                    <telerik:RadPanelBarItem x:Name="ExpandItem" >
                        <telerik:RadPanelBarItem.Header>
                            <TextBlock Text="Expand Item" />
                        </telerik:RadPanelBarItem.Header>
     
                        <ListBox Height="200" Margin="1,17,1,143" ItemsSource="{Binding TList}" BorderBrush="Transparent" BorderThickness="0"  SelectedItem="{Binding SelectedTool, Mode=TwoWay}"
                                 >
                        </ListBox>
                    </telerik:RadPanelBarItem>
     
                </telerik:RadPanelBar>

    I also want the first item in the TList to be selected by default when ExpandItem is selected. Please help with this. 
    Thanks in Advance 
  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 04 Dec 2012 Link to this post

    Hi Vivek,

    I attached a sample solution demonstrating how to implement your requirement.

    However, please keep in mind that the RadPanelBar control is essentially an ItemsControl that is designed to display hierarchical data similarly to the RadTreeView control. So it might be better to try an approach where the RadPanelBar control is data bound to a hierarchical collection of data as described in this tutorial.

    Also, as in your code snippet, the RadPanelBarItems are declaratively defined, the PanelBarItem object should be of type RadPanelBarItem. However, it is considered a bad practice to use visual elements inside the view models. This is why I modified your PanelBar definition to control the selection of the PanelBar items through the xaml settings (setting the DefaultItem IsSelected property to True will do the trick) and I only bound the ListBox.SelectedItem property as the control is data bound to a collection of business items.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Vivek
    Vivek avatar
    33 posts
    Member since:
    Oct 2012

    Posted 07 Jan 2013 Link to this post

    Please don't mind the late reply. Thanks Tina. It worked for me. 
    I need another help with the panelbar Item. How can I hide the Collapse/Hide button for "DefaultItem"? As its not expandable i want to hide the button and it should be there for "ExpandItem". 

    Thanks in advance.

  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 07 Jan 2013 Link to this post

    Hello Vivek,

    Unfortunately this is an issue in the control and it is logged in our PITS. At the moment we can't bind to a time-frame when it will be fixed but you can raise its priority by casting your vote in our PITS.

    In the meantime, in order to remove the expander icon on certain items, you need to edit their default ControlTemplates. This will allow you to bind the Visibility of the expander indicator to the HasItems property of the RadPanelBarItem. This way the expander will be displayed only when the item has children:
    <telerik:BooleanToVisibilityConverter x:Key="boolToVisConverter" />
    ...
    <
    Path x:Name="arrow" Grid.Column="5"
                Data="M1,1.5L4.5,5 8,1.5"
                HorizontalAlignment="Right" Margin="7,0" Opacity="1"
                RenderTransformOrigin="0.5,0.5" Stretch="None"
                Stroke="Black" StrokeThickness="2"
                VerticalAlignment="Center"
                Visibility="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPanelBarItem}, Path=HasItems,Converter={StaticResource boolToVisConverter}}">
            <Path.RenderTransform>
                <RotateTransform Angle="0"
                        x:Name="directionRotation" />
            </Path.RenderTransform>
    </Path>

    I modified the sample to demonstrate this approach. I hope that will help.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top