[Solved] RadImageButton as RadDataBoundListBoxItem

[Bharath]

Hello All,
  I have just started using Telerik Controls in my app. In RadDataBoundListBox, I have used RadImageButton with TextBlock inside ListBox. My Xaml code for it is,
 

<telerikPrimitives:RadDataBoundListBox x:Name="radDataBoundListBox" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged" Background="#FFA08888" Margin="0,0,13,6">
                <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
                    <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal"/>
                </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
                <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" Width="400" Height="70" HorizontalAlignment="Right" Orientation="Horizontal">

                            <telerikPrimitives:RadImageButton RestStateImageSource="/Recipes;component/Images/bookmark1.png"  PressedStateImageSource="Images/bookmark.png" ButtonBehavior="ToggleButton"
                                  DisabledStateImageSource="Images/star-none.png" Click="Favourite_Clicked" DataContext="{Binding}" Name="image" Checked="Favorite_Checked" />
                            <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="40" FontFamily="Segoe WP Light" Foreground="Black" />
                        </StackPanel>
                    </DataTemplate>
                </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            </telerikPrimitives:RadDataBoundListBox>

Now If user selects the ImageButton, I want it to move to another RadDataBoundListBox ,"Favorites". So, I attempted to get the index of ImageButton clicked and move the corressponding Item in ItemSource to Favorites List. But I could not figure out the right method. I could get the TextBlock index as SelectedItem but not RadImageButton.

How to know the index of "ImageButton" currently clicked in ListBox. I do not have this ImageButton in my ViewModel or ItemModel. So, if I know the index of ImageButton clicked, I will use that to find corresponding ItemViewModel. Or Is there any Binding property to use with TextBlock?

Short Note : If "Favorite" image button is clicked, I want to move that ListItem to another ListBox.

 Kindly Help me.  Thank you.

[Todor]

Hi Bharath,

Thank you for your question.

You can use our ElementTreeHelper in order to find the selected item in the RadDataBoundListBox. Once you have it, you have access to its associated data item and you can take the index only or the whole item, depending on what's relevant in your scenario. Here's an example:

private void Favorite_Checked(object sender, RoutedEventArgs e)
{
    RadImageButton button = sender as RadImageButton;
    RadDataBoundListBoxItem item = ElementTreeHelper.FindVisualAncestor<RadDataBoundListBoxItem>(button);
    if (item != null)
    {
        object selectedItem = item.AssociatedDataItem.Value;
        int selectedIndex = item.AssociatedDataItem.Index;
    }
}

I hope this information helps. Let me know if I can assist you further.


All the best,
Todor
the Telerik team

[Bharath]

Hello Todor,
 Thanks a lot for your reply.

I achieved moving the selected item to another listbox. Now I want to remove that item from listbox. I need something like,

this.radListBox.Remove(SelectedItem or item);

Is this possible? Thanks.

Regards,
Bharath MG

[Todor]

Hi,

The RadDataBoundListBox visualizes the list of items that you have set through its ItemsSource property. In order to remove an item, you just have to remove it from the list that you provide, in your case the Items collection:

Items.Remove(selectedItem);

Greetings,
Todor
the Telerik team

[Bharath]

Hello Todor,
 Thanks a lot. And is there anyway I could loop through different controls in my RadDataBoundListBox?  I have ImageButton and TextBlock in my listbox.
I am using ObservableCollection for binding TextBlocks. But for ImageButtons each time I want to loop through and set different image sources and "Checked" or "Unchecked" Values. How can I loop through ImageButtons in RadDataBoundListBox? And can I toggle Imagebutton manually? Thanks.

Regards,
Bharath

[Todor]

Hello,

I'm assuming that all the information that is in one item in the RadDataBoundListBox is related, so you need to put all of it one custom item and then create an ObservableCollection consisting of this type of items. For example, if you need text for the textboxes, uris for the image sources and Booleans for the checkboxes, you can create a custom class that has all the necessary information:

public class CustomItem
{
  public bool IsChecked {get;set;}
  public Uri ImageSource {get;set;}
  public string Text {get;set;}
}

Then you create an ObservableCollection<CustomItem> and bind each of the controls in the ItemTemplate of RadDataBoundListBox to the relevant properties.

I hope this information helps.

All the best,
Todor
the Telerik team