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>
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
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>filesView.ContentHello 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/.
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.