radDropDownButton and dynamic drop down contents, howto?

[Bernd]

Hello,

maybe this is an easy one for anybody (but not for me). I could find a lot of examples using the radDropDownButton but all of them do fill the drop down list through the .XAML file, not dynamically.
I tried several things like 

List

 

 

<System.Windows.Controls.ListBoxItem> theItems=new List<System.Windows.Controls.ListBoxItem>();

 

...
// Fill List with several items...
...
[radDropDownButton].DropDownContent=theItems;

 

 

but nothing worked correctly.
Does anybody know how to fill it so that when it drops down, it displays the contents?
Is there any documentation about how to use the Telerik Controls? It seems like there are only examples and class documentation, but no real manual like "How to use the ... control".

Thank you,
Bernd.

[Tina Stancheva]

Hi Bernd,

You need to set theDropDownButton DropDown content to a visual element. In your case you need to create a ListBox and fill it with ListBoxItems and then set the ListBox as DropDownContent:

//create a RadDRopDownButton
RadDropDownButton dropDownButton = new RadDropDownButton();
dropDownButton.Content = "MyDropDownButton";

//create a ListBox
ListBox listBox = new ListBox();
for (int i = 0; i < 5; i++)
{
    listBox.Items.Add(new ListBoxItem() { Content = "Item " + i });
}

//set the ListBox as the RadDropDownButton's DropDownContent
dropDownButton.DropDownContent = listBox;

Based on your feedback we will definitely update our online documentation to better illustrate such scenarios. More information about how to use our Silverlight controls you can find in the Step-by-Step tutorial here.

I hope that info will help you. Let us know if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[Allen]

Fine, but how to bind the SelectedItem to a viewmodel property?  The following shows an empty button and does not bind the vale back to the viewmodel property InputUOM which is any of the literals  M, MP, E, EP

<telerik:RadDropDownButton x:Name="UOMInputButton" AutoOpenDelay="0:0:0.5"
                        Content="{Binding SelectedItem.Content, ElementName=UIOptionsList}"
                        FontWeight="Bold" ToolTip="Set INPUT units of measure ( - UI  M|MP|E|EP )"
                        Margin="0"
                        HorizontalContentAlignment="Center"
                        Width="36"
                        HorizontalAlignment="Left"  >
                <telerik:RadDropDownButton.ContentTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding InputUOM}" />
                    </DataTemplate>
                </telerik:RadDropDownButton.ContentTemplate>
                <telerik:RadDropDownButton.DropDownContent>
                    <ListBox x:Name="UIOptionsList">
                        <ListBoxItem Content="M" ToolTip="Input data is in METRIC QUANTITIES" IsSelected="True" />
                        <ListBoxItem Content="MP" ToolTip="Input data is in METRIC PERCENTAGES" />
                        <ListBoxItem Content="E" ToolTip="Input data is in ENGLISH QUANTITIES" />
                        <ListBoxItem Content="EP" ToolTip="Input data is in ENGLISH PERCENTAGES" />
                    </ListBox>
                </telerik:RadDropDownButton.DropDownContent>
            </telerik:RadDropDownButton>

[Zarko]

Hi Allen,
Currently you're binding the Content of the RadDropDownButton to the SelectedItems Content of the ListBox, but your ListBox is not bound and its SelectedItem is of type ListBoxItem and the content is of type string, so you're binding the Content of the RadDropDownButton to string. The problem comes from the DropDownContentTemplate - in it you try to show InputUOM property, but your object is string and it doesn't have such property. The are two things you can do - remove the template like this:

<telerik:RadDropDownButton x:Name="UOMInputButton"
                                   Width="36"
                                   Margin="0"
                                   HorizontalAlignment="Left"
                                   AutoOpenDelay="0:0:0.5"
                                   Content="{Binding SelectedItem.Content,
                                                     ElementName=UIOptionsList}"
                                   FontWeight="Bold"
                                   HorizontalContentAlignment="Center">
    <telerik:RadDropDownButton.DropDownContent>
        <ListBox x:Name="UIOptionsList">
            <ListBoxItem Content="M" IsSelected="True" />
            <ListBoxItem Content="MP" />
            <ListBoxItem Content="E" />
            <ListBoxItem Content="EP" />
        </ListBox>
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

or use business objects in your ListBox.
For further references could you please examine the attached project and if you have more questions feel free to ask.

Greetings,
Zarko
the Telerik team

[Muthuraj]

Tina,

What is the alternate DisplayMemberPath & ValueMemberPath for RadDropDownButton control?

Thanks!

Muthu

[Dinko | Tech Support Engineer]

Muthuraj,

As the RadDropDownButton doesn't expose such properties, what I can suggest you is in the DropDownContent of the RadDropDownButton specify a RadListBox. You can bind the ItemsSource property of the list box to a collection from your view model and set the DisplayMemberPath property of the control. 

I have created sample project which demonstrates this approach and attached it to this reply.

Regards,
Dinko
Progress Telerik

[Muthuraj]

Thanks Dinko for your assistance. Also please help me on my another post as well.

Thanks in advance!