SfDataGrid overlapping with existing content using MAUI and .NET 7

Question

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

if you don't specify a row/column an element in a Grid will be placed in 0,0, even if there are other elements already there — Jason, Jan 31 '23 at 22:36

score 0 · Answer 1 · answered Jan 31 '23 at 22:46

0

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" ... />

answered Jan 31 '23 at 22:46

Jason

86,222
15
131
146

score 0 · Answer 2 · answered Feb 01 '23 at 08:21

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 >

SfDataGrid overlapping with existing content using MAUI and .NET 7

2 Answers2