Delete Row - UI Bug

4 posts, 0 answers
  1. corner4
    corner4 avatar
    4 posts
    Member since:
    Nov 2015

    Posted 07 Nov Link to this post

    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" ?>
                 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; }
        }
    }

     

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 10 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. corner4
    corner4 avatar
    4 posts
    Member since:
    Nov 2015

    Posted 14 Nov Link to this post

    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.

  4. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 16 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top