DataGrid when user resizes window

0 Answers 539 Views
DataGrid
Arkady
Top achievements
Rank 1
Iron
Iron
Arkady asked on 24 Jun 2022, 06:02 AM

Hi, today found bug in DataGrid on Mac OS. I'm using Macbook Air M1. When user resizes window with DataGrid inside - somehow grid content goes behind the header (see video)

There is nothing specific or customize, just did very simple grid.


<telerik:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding ViewModel.Files}" Margin="50,100,30,30" 
                             AutoGenerateColumns="False" RowHeight="45">
            <telerik:RadDataGrid.Columns>
                <telerik:DataGridTemplateColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Name" Width="250"
                                                CellContentTemplate="{StaticResource NameColumnCellTemplate}" 
                                                CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridDateColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Modified Date" Width="180"
                                            CellContentFormat="{}{0: dd/MM/yyyy H:mm tt}" PropertyName="LastModified" 
                                            CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridTextColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Tag(s)" Width="170"
                                            PropertyName="Tags" 
                                            CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridNumericalColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Size" Width="130"
                                                 CellContentFormat="{}{0:D}" PropertyName="Size"
                                                 CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
            </telerik:RadDataGrid.Columns>
        </telerik:RadDataGrid>

Antoan
Telerik team
commented on 27 Jun 2022, 02:31 PM

Hello Arkady,

Thank you for the provided video.

I have tested the behavior of the DataGrid, and did not seem to reproduce the issue. This type of behavior may be related to the layout in which the DataGrid is defined. Could you please send the code of the whole page where the control is defined. In this way I can research the case further. 

Regards,

Antoan

Arkady
Top achievements
Rank 1
Iron
Iron
commented on 28 Jun 2022, 02:57 AM | edited

here is Page layout

<ContentPage
    x:Class="ExplorerPage"
    xmlns:local="clr-namespace:Explorer"
    xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title=""
    >

    <Grid ColumnDefinitions="300,*,35" RowDefinitions="100,*"
          Background="{AppThemeBinding Light={StaticResource BackgroundLightBrush}, Dark={StaticResource BackgroundDarkBrush}}"
          >
        <Grid Padding="17,0,0,0">
            <Image 
                Source="{AppThemeBinding Light={StaticResource LogoLight}, Dark={StaticResource LogoDark}}"
                VerticalOptions="Center" HorizontalOptions="Start"
                WidthRequest="210"
                />
        </Grid>

        <ContentView Grid.Row="0" Grid.Column="1" x:Name="commandsView" 
                     HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                     />

        <ContentView Grid.Row="1" Grid.Column="0" x:Name="foldersView" Padding="0,0,40,0"
                     HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                     />

        <telerik:RadBorder Grid.Row="1" Grid.Column="1" CornerRadius="30,30,0,0">
            <telerik:RadBorder.Shadow>
                <Shadow Radius="20" Brush="{AppThemeBinding Light={StaticResource DarkGrayBrush}, Dark={StaticResource WhiteBrush}}" Opacity="0.05" Offset="0,0" />
            </telerik:RadBorder.Shadow>
            <ContentView x:Name="filesView" 
                            HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                            BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}"
                />
        </telerik:RadBorder>

        <ContentView Grid.ColumnSpan="3" Grid.RowSpan="2" x:Name="tasksView" IsVisible="{Binding TasksPopupPresenter.ViewModel.IsVisible}"
                     HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"
                     Margin="10" BackgroundColor="Transparent" WidthRequest="360" 
                     />

    </Grid>
</ContentPage>

Here is View layout

<ContentView
    x:Class="FilesListView"
    xmlns:local="clr-namespace:FilesList"
    xmlns:models="clr-namespace:Models"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    xmlns:images="clr-namespace:Images"
    xmlns:res="clr-namespace:Resources"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    >

    <ContentView.Resources>
        <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter" />

        <Style x:Key="ToolbarButton" TargetType="ImageButton">
            <Setter Property="BorderColor" Value="{StaticResource ButtonBorder}" />
            <Setter Property="BorderWidth" Value="1" />
            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource DarkGray}}" />
            <Setter Property="WidthRequest" Value="35" />
            <Setter Property="HeightRequest" Value="35" />
            <Setter Property="CornerRadius" Value="8" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Padding" Value="10" />
        </Style>

        <Style x:Key="NewToolbarButton" TargetType="Button">
            <Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Dark}}" />
            <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Dark}}" />
            <Setter Property="BorderWidth" Value="1" />
            <Setter Property="HeightRequest" Value="35" />
            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
            <Setter Property="CornerRadius" Value="8" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Padding" Value="10" />
        </Style>

        <telerik:DataGridColumnHeaderStyle x:Key="CheckedHeaderCelStyle"
                                           BackgroundColor="{StaticResource White}" 
                                           TextColor="{StaticResource Black}" 
                                           TextFontAttributes="Bold" BorderThickness="0,0,0,1" BorderColor="Transparent" />

        <telerik:DataGridColumnHeaderStyle x:Key="HeaderCellStyle" 
                                           BackgroundColor="{StaticResource White}" 
                                           TextColor="{StaticResource Black}" 
                                           TextFontAttributes="Bold" BorderThickness="0,0,0,1" />

        <DataTemplate x:Key="CheckedColumnCellTemplate" x:DataType="models:ItemModel">
            <Grid WidthRequest="45" HeightRequest="45">
                <CheckBox VerticalOptions="Center" HorizontalOptions="Center" 
                          IsChecked="{Binding IsSelected}" CheckedChanged="CheckBox_CheckedChanged" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="NameColumnCellTemplate" x:DataType="models:ItemModel">
            <Grid ColumnDefinitions="40,*" ColumnSpacing="10">
                <Image Source="{Binding Icon}" WidthRequest="20" VerticalOptions="Center" HorizontalOptions="Center" />
                <Label Grid.Column="1" Text="{Binding Title}" FontSize="14" VerticalOptions="Center" HorizontalOptions="Start" />
            </Grid>
        </DataTemplate>
    </ContentView.Resources>

    <Grid RowDefinitions="90,*" Padding="50,0,30,30" RowSpacing="10">
        <Grid ColumnDefinitions="*,Auto">
            <HorizontalStackLayout Grid.Column="1" HeightRequest="40" VerticalOptions="Center" Spacing="10">
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarManage}" />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarShare}" />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarDownload}"
                             Command="{Binding DownloadFileCommand}" />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarCopyPath}"
                             Command="{Binding CopyPathCommand}"/>
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarDelete}" />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarMore}" />
                <Button x:Name="NewButton" Style="{StaticResource NewToolbarButton}" ContentLayout="Right,5" 
                        Text="{x:Static res:LocaleStrings.New}" ImageSource="{x:Static images:Images.IconToolbarNew}" Clicked="NewButton_Clicked" />
                <BoxView Color="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource MidGray}}" 
                         WidthRequest="1" HeightRequest="40" Margin="15,0" 
                         />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarGrid}" />
                <ImageButton Style="{StaticResource ToolbarButton}" Source="{x:Static images:Images.IconToolbarInfo}" />
            </HorizontalStackLayout>
        </Grid>
        <telerik:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Files}" Grid.Row="1" 
                             AutoGenerateColumns="False" RowHeight="45" SelectionMode="Multiple" SelectionUnit="Row">
            <telerik:RadDataGrid.SelectionStyle>
                <telerik:DataGridBorderStyle BackgroundColor="#1A01AEB9" BorderColor="#6FCFD6" BorderThickness="1" />
            </telerik:RadDataGrid.SelectionStyle>
            <telerik:RadDataGrid.MouseHoverStyle>
                <telerik:DataGridBorderStyle BackgroundColor="#1A01AEB9" BorderColor="#6FCFD6" BorderThickness="1" />
            </telerik:RadDataGrid.MouseHoverStyle>
            <telerik:RadDataGrid.Columns>
                <telerik:DataGridTemplateColumn HeaderStyle="{StaticResource CheckedHeaderCelStyle}" HeaderText="" Width="45" SizeMode="Fixed"
                                                CellContentTemplate="{StaticResource CheckedColumnCellTemplate}"
                                                CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridTemplateColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Name" Width="250"
                                                CellContentTemplate="{StaticResource NameColumnCellTemplate}" 
                                                CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridDateColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Modified Date" Width="180"
                                            CellContentFormat="{}{0: dd/MM/yyyy H:mm tt}" PropertyName="LastModified" 
                                            CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridTextColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Tag(s)" Width="170"
                                            PropertyName="Tags" 
                                            CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
                <telerik:DataGridNumericalColumn HeaderStyle="{StaticResource HeaderCellStyle}" HeaderText="Size" Width="130"
                                                 CellContentFormat="{}{0:D}" PropertyName="Size"
                                                 CanUserSort="False" CanUserFilter="False" CanUserEdit="False" />
            </telerik:RadDataGrid.Columns>
        </telerik:RadDataGrid>
    </Grid>
 </ContentView>
View assigned to 
filesView.Content
Antoan
Telerik team
commented on 28 Jun 2022, 11:08 AM

Hello Arkady,

I managed to reproduce the issue, it seems like the DataGrid content isn't measured correctly on MacCatalyst. However I am not sure whether the issue is related to the DataGrid control or to the layout in which the control is placed. This type of behavior can only be reproduced when using a row with height set to "*", using definitive value for the row height seems to fix this. I wouldn't recommend changing the layout as well, as setting the layout to a VerticalStackLayout or the row to type "Auto" will raise different problems. For example the DataGrid would not measure correctly on start and will need the page to be resized before rendering.

I would require more time to investigate this and will send an update by the end of the week. Thank you for the understanding.

Regards,
Antoan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Antoan
Telerik team
commented on 30 Jun 2022, 01:44 PM

Hi Arkady,

I have done some careful research on the matter and it turns out that the issue is coming from the DataGrid itself. I have logged a bug report on your behalf, you can follow it in our public feedback portal and be notified when its status changes: 
https://feedback.telerik.com/maui/1571038-datagrid-maccatalyst-content-does-not-measure-correctly-when-resizing

Regards,
Antoan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

No answers yet. Maybe you can help?

Tags
DataGrid
Asked by
Arkady
Top achievements
Rank 1
Iron
Iron
Share this question
or