This is a migrated thread and some comments may be shown as answers.

Delete Row - UI Bug

3 Answers 57 Views
This is a migrated thread and some comments may be shown as answers.
corner4
Top achievements
Rank 1
corner4 asked on 07 Nov 2017, 04:59 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 10 Nov 2017, 12:58 PM
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
0
corner4
Top achievements
Rank 1
answered on 14 Nov 2017, 09:19 AM

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.

0
Stefan Nenchev
Telerik team
answered on 16 Nov 2017, 02:58 PM
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
Asked by
corner4
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
corner4
Top achievements
Rank 1
Share this question
or