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

4 posts, 0 answers
  1. Jérôme
    Jérôme avatar
    2 posts
    Member since:
    Mar 2017

    Posted 29 Jun Link to this post

    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?

  2. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 04 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Jérôme
    Jérôme avatar
    2 posts
    Member since:
    Mar 2017

    Posted 04 Jul in reply to Dinko Link to this post

    Hi Dinko,

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

    <Window x:Class="TabControl_TileView.MainWindow"
            xmlns:local="clr-namespace:TabControl_TileView"
            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

  4. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 06 Jul Link to this post

    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 tileview 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 tileview 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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top