Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] RadDataGrid columns can not reorder normally after toggle IsVisible Property to hide/show the columns #510

Open
SonHai32 opened this issue Apr 22, 2022 · 0 comments

Comments

@SonHai32
Copy link

SonHai32 commented Apr 22, 2022

Description

Binding the IsVisible Property from ViewModel into DataGridTextColumn to hide/show column by toggling the checkbox
All the checkbox binding the boolean property in mode TwoWay

Steps to Reproduce

  1. Create UWP Project and import some Nuget Packages as same as Basic Infomation bellow
  2. Create the ViewModel with inheritance of ViewModelBase (using GalaSoft.MvvmLight). Define 3 properties _one; _two; _three; with type of bool and have default value = true. We can see this code bellow:
using GalaSoft.MvvmLight;

namespace Test
{
    public class TestVM : ViewModelBase
    {
        private bool _one = true;
        private bool _two = true;
        private bool _three = true;
        public bool One
        {
            get => _one;
            set => Set(ref _one, value);
        }

        public bool Two
        {
            get => _two;
            set => Set(ref _two, value);
        }
        public bool Three
        {
            get => _three;
            set => Set(ref _three, value);
        }
    }
}
  1. Create the MainPage.xaml with using RadDataGrid like this code bellow:
<Page
    x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:tg="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <tg:RadDataGrid 
            x:Name="LDT_TeleriskRadData_QueueCall"
            Grid.Column="0"
            AutoGenerateColumns="False"
            Margin="2"
            BorderThickness="0,1,0,0"
            GridLinesVisibility="None"
            Background="#f2f2f2"
            RowBackground="White"
            RowHeight="30"
            HorizontalContentAlignment="Left"
            ColumnResizeHandleDisplayMode="None"
            UserSortMode="Auto"
            UserFilterMode="Disabled"
            UserGroupMode="Disabled"
            SelectionMode="Single"
            IsTabStop="False"
        >
            <tg:RadDataGrid.Resources>
                <Style TargetType="gridPrimitives:DataGridColumnHeader">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="MinWidth" Value="66"/>
                    <Setter Property="Margin" Value="1"/>
                </Style>
                <Style TargetType="gridPrimitives:SelectionRegionBorderControl">
                    <Setter Property="Background" Value="Bisque"/>
                    <Setter Property="BorderBrush" Value=""/>
                    <Setter Property="Opacity" Value="0.6"/>
                </Style>
                <Style TargetType="gridPrimitives:DataGridColumnDragControl">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Foreground" Value="Black"/>
                </Style>
                <SolidColorBrush x:Key="TelerikGridInnerShadowBrush" Color="#CCCCCC"/>
                <SolidColorBrush x:Key="TelerikGridShadowBrush" Color="Transparent"/>
            </tg:RadDataGrid.Resources>
            <tg:RadDataGrid.Columns>
                <tg:DataGridTextColumn
                    IsVisible="{x:Bind ViewModel.One, Mode=OneWay}"
                    Header="1"
                    CanUserSort="True"
                    Width="86"
                    SizeMode="Stretch"
                    />
                <tg:DataGridTextColumn
                    IsVisible="{x:Bind ViewModel.Two, Mode=OneWay}"
                    Header="2"
                    CanUserSort="True"
                    Width="86"
                    SizeMode="Stretch"
                    />
                <tg:DataGridTextColumn
                    IsVisible="{x:Bind ViewModel.Three, Mode=OneWay}"
                    Header="3"
                    CanUserSort="True"
                    Width="86"
                    SizeMode="Stretch"
                    />
                <tg:DataGridTextColumn
                    Header="4"
                    CanUserSort="True"
                    Width="86"
                    SizeMode="Stretch"
                    />
                <tg:DataGridTextColumn
                    Header="5"
                    CanUserSort="True"
                    Width="86"
                    SizeMode="Stretch"
                    />
            </tg:RadDataGrid.Columns>
        </tg:RadDataGrid>
        <StackPanel Grid.Column="1">
            <CheckBox IsChecked="{x:Bind ViewModel.One, Mode=TwoWay}" Content="1" />
            <CheckBox IsChecked="{x:Bind ViewModel.Two, Mode=TwoWay}" Content="2" />
            <CheckBox IsChecked="{x:Bind ViewModel.Three, Mode=TwoWay}" Content="3" />
        </StackPanel>
    </Grid>
</Page>
  • Three DataGridTextColumns (column with Header=1, 2 and 3) has the Property IsVisible with binding mode OneWay to ViewModel
  • Three Checkboxs has the Property "IsChecked" with binding mode TwoWay to toggle the Property from ViewModel. Three checkbox use to hide/show 3 columns in DataGrid
  1. Run the Project
  2. Try to swap some columns, and it work normally
  3. Hide 3 columns 1;2;3
  4. Swap column 4;5
  5. Show column 3
  6. Swap column 3 and see how it working

Expected Behavior

The column 3 can swap normally

Actual Behavior

The column 3 can not swap with other columns

See this gif bellow for more details:

ezgif com-video-to-gif

Basic Information

  • Version with issue: 1.0.2.8
  • IDE: Visual Studio Community 2019
  • UWP SDK: 10.0.19041.0
  • Nuget Packages:
    <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
      <Version>6.2.12</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls">
      <Version>5.1.1</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.DataGrid">
      <Version>5.1.0</Version>
    </PackageReference>
    <PackageReference Include="MvvmLight">
      <Version>5.4.1.1</Version>
    </PackageReference>
    <PackageReference Include="Telerik.UI.for.UniversalWindowsPlatform">
      <Version>1.0.2.8</Version>
    </PackageReference>
    <PackageReference Include="WinUX.UWP.Xaml.Controls">
      <Version>2.4.17005.1</Version>
    </PackageReference>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant