SfDataGrid overlapping with existing content using MAUI and .NET 7-CodePudding

I've created a table using the SfDataGrid plugin as well as a standard Stacklayout template to load other data.

I've contained both in a <Grid>. Both load, however, they load on top of each other / under the table

The general Hierarchy of the page is as follows

<Grid>
      //declare Grid and following columns
      <syncfusion:SfDataGrid>

            <syncfusion:SfDataGrid.Columns>

            </syncfusion:SfDataGrid.Columns>

    </syncfusion:SfDataGrid>
    
       
   //Declare Dropdowns and filters contained in a StackLayout
 
    <StackLayout Grid.Row="3" Grid.Column="0" Grid.RowSpan="5">
    </StackLayout>

 </Grid>

This image demonstrates the issue occurring. As you can see the secondary data(the dropdowns) overlap on top of the table data, where it should be positioned at the bottom

Output

CodePudding user response：

you have to specify the Row and Column each element should appear in, otherwise they will be placed on top of one another in 0,0. This is covered in the docs

<Label Grid.Row="5" Grid.Column="2" ... />

CodePudding user response：

There are two solutions that you can adjust the place of the the dropdowns at the bottom of the SfDataGrid.

#1 Solution:


 <Grid > 

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>



        <Grid Grid.Row="0" Grid.ColumnSpan="5">

             //SfDataGrid  Control
        
        </Grid >


        <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5" >

             <Button Text="test" WidthRequest="100" HeightRequest="20"/>
         
        </Grid>

</Grid >

Note: I used a Button to replace Dropdowns and filters contained in a StackLayout. You can replace it back with Dropdowns and filters.

#2 Solution:

Set VerticalOptions="End" like below:


 <Grid > 
        <Grid >
             //SfDataGrid  Control
        </Grid >


        <StackLayout VerticalOptions="End">
            
             <Button Text="test" WidthRequest="100" HeightRequest="20"></Button>

        </StackLayout>

</Grid >