Problem in drag and drop when showing 2 RadTileView with the same collection source

[Jérôme]

I have 2 RadTileView in two different tab from a RadTabControl.

The first RadTileView can reorder its items and there is a binding with the position property to reorder the items in the second RadTabControl.

It works well until I select the second tab and show the second RadTileView where the items are ordered like the first one as I want.

But now if I return in the first tab and drag some items, I have some blank spaces that appears and my items are disappearing.

How can I fix this?

[Dinko | Tech Support Engineer]

Hi Jérôme,

Thank you for contacting us.

We weren't able to reproduce this behavior using only the provided information. Attached to this reply you can find the project which we used to test your scenario. Can you take a look and let us know if we are missing some additional code(properties, events) from your implementation in order to reproduce it. You can modify the project and send it back to us. Can you also elaborate more on the steps to reproduce this?

We are looking forward to your reply.

Regards,
Dinko
Progress Telerik

[Jérôme]

Hi Dinko,

Here is the modified project. The position's binding was missing.

<Window x:Class="TabControl_TileView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TabControl_TileView"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadTabControl x:Name="tabControl">

            <telerik:RadTabItem Header="Tab Item 1">
                <telerik:RadTileView x:Name="tileView" ItemsSource="{Binding Items}" DisplayMemberPath="Header">
                    <telerik:RadTileView.ItemContainerStyle>
                        <Style TargetType="telerik:RadTileViewItem">
                            <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
                        </Style>
                    </telerik:RadTileView.ItemContainerStyle>
                </telerik:RadTileView>
            </telerik:RadTabItem>

            <telerik:RadTabItem Header="Tab Item 2">
                <telerik:RadTileView x:Name="tileView2" ItemsSource="{Binding Items}" DisplayMemberPath="Header" IsItemDraggingEnabled="False">
                    <telerik:RadTileView.ItemContainerStyle>
                        <Style TargetType="telerik:RadTileViewItem">
                            <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
                        </Style>
                    </telerik:RadTileView.ItemContainerStyle>
                </telerik:RadTileView>
            </telerik:RadTabItem>

        </telerik:RadTabControl>
    </Grid>
</Window>

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace TabControl_TileView
{
    public class Item : INotifyPropertyChanged
    {
        private int _position;

        public string Header { get; set; }

        public int Position
        {
            get { return _position; }
            set
            {
                _position = value;
                OnPropertyChanged();
            }
        }

        #region INotifyPropertyChanged implementation
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));

        }
        #endregion

    }
}

 

Jérôme

[Dinko | Tech Support Engineer]

Hello Jérôme,

Thank you for the provided code snippets.

The reason behind this behavior is that you are bidding the Position property of the both TileView using TwoWay binding mode. As the both controls are bind to one collection this will lead to breaking the binding because every time you change the position of a tile will trigger the property change of the Position property. To fix this you can set the binding mode of the first to OneWayToSource.

<telerik:RadTabControl x:Name="tabControl" >
    <telerik:RadTabItem Header="Tab Item 1">
        <telerik:RadTileView x:Name="tileView" ItemsSource="{Binding Items}" DisplayMemberPath="Header" >
            <telerik:RadTileView.ItemContainerStyle>
                <Style TargetType="telerik:RadTileViewItem">
                    <Setter Property="Position" Value="{Binding Position,Mode=OneWayToSource}" />
                </Style>
            </telerik:RadTileView.ItemContainerStyle>
        </telerik:RadTileView>
    </telerik:RadTabItem>

    <telerik:RadTabItem Header="Tab Item 2">
        <telerik:RadTileView x:Name="tileView2" ItemsSource="{Binding Items}" DisplayMemberPath="Header" IsItemDraggingEnabled="False">
            <telerik:RadTileView.ItemContainerStyle>
                <Style TargetType="telerik:RadTileViewItem">
                    <Setter Property="Position" Value="{Binding Position,Mode=TwoWay}"/>
                </Style>
            </telerik:RadTileView.ItemContainerStyle>
        </telerik:RadTileView>
    </telerik:RadTabItem>
</telerik:RadTabControl>

Regards,
Dinko
Progress Telerik