Delete Row - UI Bug

[corner4]

Good Day,

I think I found a bug in the DataGrid.
When you remove an item from the Datagrids itemsource bound ObservableCollection, the datagrid deletes the wrong item. So I started to debugged it => after the delete the itemsource is right but the view you see is wrong. (maybe a caching bug?)

 

You can easily reproduce this bug if you take your FirstLook example project.
Remove the label on top and add an button instead. Make a property for selectedItem in the mainViewmodel and bind it to the datagrids selected item.
On button click you do:

ViewModel.OrderDetails.Remove(ViewModel.Selected);

 

Here is the code:

namespace Examples.DataGrid.FirstLook
{
    public partial class Example : ContentPage
    {
        public MainViewModel ViewModel { get; set; }
        public Example()
        {
            InitializeComponent();
            ViewModel = new MainViewModel();
            this.BindingContext = ViewModel;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            var rootGrid = this.Content as Grid;
            if (Examples.Helpers.ExampleHelper.SetImageButtonOnTop(ref rootGrid))
            {
                this.Content = rootGrid;
            }
        }

        private void Button_OnClicked(object sender, EventArgs e)
        {
            ViewModel.OrderDetails.Remove(ViewModel.Selected);
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
             xmlns:common="clr-namespace:Telerik.XamarinForms.Common.Data;assembly=Telerik.XamarinForms.Common"
             xmlns:examples="clr-namespace:Examples;assembly=Examples"
             x:Class="Examples.DataGrid.FirstLook.Example">
    <Grid>
        <Grid.BackgroundColor>
            <OnPlatform x:TypeArguments="Color">
                <OnPlatform.Android>White</OnPlatform.Android>
            </OnPlatform>
        </Grid.BackgroundColor>
        <Grid.Behaviors>
            <examples:CustomBehavior />
        </Grid.Behaviors>
        <Grid.Resources>
            <ResourceDictionary>
                <examples:UwpImageSourceConverter x:Key="UwpImageSourceConverter"/>
            </ResourceDictionary>
        </Grid.Resources>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="58"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Button Text="Delete selected Pos" Clicked="Button_OnClicked"></Button>
            <telerikDataGrid:RadDataGrid Grid.Row="1"
                                         ItemsSource="{Binding OrderDetails}"
                                         AutoGenerateColumns="False"
                                         SelectionUnit="Row"
                                         SelectionMode="Single"
                                         UserEditMode="Cell"
                                         SelectedItem="{Binding Selected, Mode=TwoWay}">
                <telerikDataGrid:RadDataGrid.Columns>
                    <telerikDataGrid:DataGridTemplateColumn HeaderText="Ship owner">
                        <telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
                            <DataTemplate>
                                <Image Source="{Binding EmployeeImage, Converter={StaticResource UwpImageSourceConverter}}"
                                       Aspect="AspectFit"
                                       Margin="0, 2, 0, 2"
                                       WidthRequest="50"
                                       HeightRequest="50"/>
                            </DataTemplate>
                        </telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
                    </telerikDataGrid:DataGridTemplateColumn>
                    <telerikDataGrid:DataGridNumericalColumn PropertyName="OrderID" HeaderText="Order ID"/>
                    <telerikDataGrid:DataGridTextColumn PropertyName="ShipName" HeaderText="Ship name"/>
                </telerikDataGrid:RadDataGrid.Columns>
            </telerikDataGrid:RadDataGrid>
        </Grid>
    </Grid>
</ContentPage>

 

namespace Examples.DataGrid.FirstLook
{
    public class MainViewModel
    {
        public MainViewModel()
        {
            this.OrderDetails = DataGenerator.GenerateOrderDatails();
        }

        public ObservableCollection<Order> OrderDetails { get; set; }

        public Order Selected { get; set; }
    }
}

 

[Stefan Nenchev]

Hi, 

Thank you for the detailed explanation.

Indeed, the setup you have reported results in the unexpected behavior. Actually, we already have the task of reworking the selection mechanism of the DataGrid logged at our end as it seems to cause issues in different scenarios and this might be related. I have logged the exact issue you have currently reported. You can track its progress on the following link from our Ideas & Feedback portal - DataGrid: Removing items from the ItemsSource does not remove the item from the UI. Please subscribe to the item for automatic notifications. I have also added some points to your account for reporting the behavior.

Have a great weekend.

Regards,
Stefan Nenchev
Progress Telerik

[corner4]

We found a workaround for the deleting issue in our project.

We just added the second line. 

viewModel.Positionen.Remove(pos);
 viewModel.Positionen = new ObservableCollection<type>(viewModel.Positionen.ToList());

 

Unfortunately I can't reproduce this in the telerik example project.

[Stefan Nenchev]

Hello,

I am glad to see that you have managed to find a workaround. Thanks for sharing it as it might work for other customers which might be affected by the behavior.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik