[Solved] Remove an item from RadDataBoundListBox

[Efthymios]

Hello,
I have the following RadDataBoundListBox...

<telerikPrimitives:RadDataBoundListBox x:Name="CoursesListBox" Grid.Row="2" Margin="10">
    <telerikPrimitives:RadDataBoundListBox.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <StackPanel Margin="5">
                    <TextBlock TextWrapping="Wrap" FontSize="20" Height="29" Text="{Binding Descr}"/>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock TextWrapping="Wrap" Text="Date:" FontSize="16" Margin="0" Foreground="#FF9D9D9D"/>
                            <TextBlock TextWrapping="Wrap" FontSize="16" Margin="5,0,0,0" Text="{Binding DateOfRouteLabel}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Grid.Row="1">
                            <TextBlock TextWrapping="Wrap" Text="Distance:" d:LayoutOverrides="Width" FontSize="16" Margin="0" Foreground="#FF9D9D9D"/>
                            <TextBlock TextWrapping="Wrap" Text="{Binding DistanceLabel}" FontSize="16" Width="81" Margin="5,0,0,0"/>
                            <TextBlock TextWrapping="Wrap" Text="Duration:" FontSize="16" Margin="0" Foreground="#FF9D9D9D"/>
                            <TextBlock TextWrapping="Wrap" Text="{Binding DurationLabel}" FontSize="16" Margin="5,0,0,0"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Grid.Row="2">
                            <TextBlock TextWrapping="Wrap" Text="Steps:" d:LayoutOverrides="Width" FontSize="16" Margin="0" Foreground="#FF9D9D9D"/>
                            <TextBlock TextWrapping="Wrap" Text="{Binding Steps}" FontSize="16" Width="81" Margin="5,0,0,0"/>
                            <TextBlock TextWrapping="Wrap" Text="Stride Length:" FontSize="16" Margin="0" Foreground="#FF9D9D9D"/>
                            <TextBlock TextWrapping="Wrap" Text="{Binding StrideLength}" FontSize="16" Margin="5,0,0,0"/>
                        </StackPanel>
                    </Grid>
                </StackPanel>
                <Rectangle Stroke="#FFE50000" RadiusX="4" RadiusY="4" Margin="2"/>
            </Grid>
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.Resources>
    <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
        <StaticResource ResourceKey="DataTemplate1"/>
    </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>

As you can see, in the items template, I have TextBlocks that their Text property is binded to a property of a class.
Bellow is a small source code I have already written so that you can get an idea:

List<TripDetailsItem> filesList;

filesList = new List<TripDetailsItem>();
...
...
Populate the list
...
...

CoursesListBox.ItemsSource = filesList;

When I want to remove an item from the CoursesListBox, I do something like the following:

TripDetailsItem trip;
trip = CoursesListBox.SelectedItem as TripDetailsItem;

filesList.Remove(trip);

My problem is the following:
I observe (by debugging) that the item is really deleted from the List, but the change is not reflected visually in the RadDataBoundListBox. Why is that happening? How can I visually refresh the list box? The only way I found to reflect the change to the list box is to reset (nullify) the ItemsSource property and then set it again like the following:

CoursesListBox.ItemsSource = null;
CoursesListBox.ItemsSource = filesList;

That also has a negative side effect. The list is being scrolled automatically to the beginning of it.

Anyone have any idea on how I can solve that problem?

Thank you very much

Efthymios Kalyviotis

[Kiril Stanoev]

Hello Efthymios,

Instead of a  List<TripDetailsItem> try using ObservableCollection<TripDetailsItem>.

An ObservableCollection represents a dynamic data collection that provides notifications when items get added, removed, or when the entire list is refreshed.

All else in your application should remain the same. Give it a try and let me know if you encounter any further issues. I'd be glad to assist you.

Kind regards,
Kiril Stanoev
the Telerik team