Search code examples
mauisyncfusionsfdatagrid

Syncfusion MAUI DataGrid and VerticalStackLayout

I would like to add label above Syncfusion Datagrid but the label is hidden when I run the app in the following page.

See the following repos for complete app.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataGrid.Views.OrderInfoRepositoryView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:DataGrid"
             Title="Order Info Repository View">


    <ContentPage.BindingContext>
        <local:OrderInfoRepositoryViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>

        <VerticalStackLayout Margin="20"
                             Spacing="10">

            <Label Text="OrderInfo"
                   Margin="10,10,10,10"
                   TextColor="White"
                   BackgroundColor="Red"/>

            <syncfusion:SfDataGrid x:Name="dataGrid"
                                   ItemsSource="{Binding OrderInfoCollection}">
            </syncfusion:SfDataGrid>
        
        </VerticalStackLayout>

    </ContentPage.Content>

Did try the following but same result.

    <Label Text="OrderInfo"
           Margin="10,10,10,10"
           TextColor="White"
           BackgroundColor="Red"/>

    <syncfusion:SfDataGrid x:Name="dataGrid"
                           ItemsSource="{Binding OrderInfoCollection}">
    </syncfusion:SfDataGrid>

</VerticalStackLayout>

Here Android screenshot enter image description here

Added LineHeight and fontSize. No change enter image description here

Tested with HeightRequest. No change. enter image description here

Solution

  • It appears that you have set the Content for the ContentPage as DataGrid in OrderInfoRepositoryView.xaml.cs file. Please refer to the below file,

    https://github.com/JeanMarcFlamand/MauiSyncFusionExamples/blob/master/DataGrid/Views/OrderInfoRepositoryView.xaml.cs#L12

    You are adding the DataGrid as the content of the page in code behind i.e., OrderInfoRepositoryView constructor. That’s why the DataGrid alone is displaying without Label. We request that you remove the codes inside the OrderInfoRepositoryView constructor to overcome the issue.