Making SfDataGrid fit the entire page

[Alfredo]

Hello,

I have a simple page with a data grid:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:sfgrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
 xmlns:main="clr-namespace:Playground.Maui._7._0"
 x:DataType="main:AnotherPageViewModel"
 x:Class="Playground.Maui._7._0.AnotherPage"
             Title="AnotherPage">
    <VerticalStackLayout>
        <Grid>
            <sfgrid:SfDataGrid IsVisible="True"
                               ColumnWidthMode="Auto"
                               AllowEditing="False"
                               NavigationMode="Cell"
                               ItemsSource="{Binding People}" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

The ViewModel has a list of Person objects:

public class AnotherPageViewModel
{
    public class Person
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string HairColor { get; set; }
        public string EyeColor { get; set; }
        public string Position { get; set; }
    }

    public List<Person> People { get; set; } = new()
    {
        new Person(){ Name = "Johann Bach", Age = "50", HairColor = "Brown", EyeColor = "Brown", Position = "Director" },
        new Person(){ Name = "Piotr Tchaikovsky", Age = "54", HairColor = "Black", EyeColor = "Black", Position = "Engineer" },
        new Person(){ Name = "Wolfgang Mozart", Age = "51", HairColor = "Blond", EyeColor = "Blue", Position = "Accountant" },
        new Person(){ Name = "Johann Strauss", Age = "53", HairColor = "Red", EyeColor = "Green", Position = "Engineer" },
        new Person(){ Name = "Frederic Chopin", Age = "52", HairColor = "Black", EyeColor = "Blue", Position = "Tech Lead" },
        new Person(){ Name = "Robert Shumann", Age = "55", HairColor = "Brown", EyeColor = "Black", Position = "Tester" },
        new Person(){ Name = "Ludwig van Beethoven", Age = "56", HairColor = "Black", EyeColor = "Brown", Position = "Product Manager" },
        new Person(){ Name = "George Gershwin", Age = "57", HairColor = "Blond", EyeColor = "Black", Position = "Director" },
        new Person(){ Name = "Sergei Rachmaninoff", Age = "58", HairColor = "Black", EyeColor = "Black", Position = "Personnel" },
        new Person(){ Name = "Franz Schubert", Age = "59", HairColor = "Blond", EyeColor = "Black", Position = "Human Resources" },
    };
}

When I run this, the grid cuts off halfway down the page, instead of filling the whole page:

How do I make the grid take up the whole page?

Thanks,

Alfredo Diaz

[Nirmalkumar Yuvaraj]

Hi Alfredo,

Based on the provided code snippet, it seems that you are using a DataGrid within a vertical stack layout. Since the vertical stack layout has infinite height, the DataGrid will inherit this infinite height. In the DataGrid implementation, when it encounters infinite height or width, it defaults to a height of 300 and a width of 300, respectively. However, because the VerticalStackLayout returns height as infinity, the DataGrid fails to fit the entire screen. To resolve this issue, consider using a Grid or StackLayout instead of VerticalStackLayout, and make sure that VerticalOptions are configured to FillAndExpand.

Regards,

Nirmalkumar

[Alfredo]

That worked - thank you Nirmalkumar!

Alfredo Diaz