We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
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
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/under the table
Attachment: Screenshot_20230201_092610_a720b3d4.zip
Hi Adam,
By default, the DataGrid is set to 300 height if the parent height is returned as infinite. The given Grid layout has only one row and one column by default. If you add a multiple child to a Grid without specifying the child's Grid.Row index, the grid will layout the child to the 0th Row index. Based on your code snippets, you have not set RowDefinitions for Grid and set Row index for DataGrid. As a result, all of Grid's Children overlap at the 0th row index. So, set the Grid and define a RowDefinitions list that represents the height of the Gird rows. Please see the highlighted code snippets and attached sample for more information.
| <Grid <Grid.RowDefinitions> <RowDefinition Height="300"></RowDefinition> <RowDefinition Height="200"></RowDefinition> </Grid.RowDefinitions> <sfDatagrid:SfDataGrid Grid.Row="0" x:Name="dataGrid" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" AutoGenerateColumnsMode="None" VerticalScrollBarVisibility="Always" NavigationMode="Cell" SelectionMode="Single" SortingMode="Multiple" AlternationRowCount="2" RowHeight="30" HeaderRowHeight="30" HeaderGridLinesVisibility="Both" GridLinesVisibility="Both" BackgroundColor="White" ItemsSource="{Binding OrderInfoCollection}" DefaultColumnWidth="260"> <sfDatagrid:SfDataGrid.Resources> <Style TargetType="sfDatagrid:DataGridHeaderRow"> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="0"/> </Style> <Style TargetType="sfDatagrid:DataGridCell"> <!-- <Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=DataGridBackgroundColorConverter}, ConverterParameter={Binding Source={x:Reference control}}}"/> <Setter Property="TextColor" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=DataGridTextColorConverter}, ConverterParameter={Binding Source={x:Reference control}}}"/> <Setter Property="FontAttributes" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=DataGridFontAttributesConverter}, ConverterParameter={Binding Source={x:Reference control}}}"/> --> <Setter Property="FontSize" Value="14"/> <Setter Property="Margin" Value="0"/> </Style> <Style TargetType="sfDatagrid:DataGridRow"> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="0"/> </Style> <Style TargetType="Label"> <Setter Property="FontSize" Value="14"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="0"/> </Style> </sfDatagrid:SfDataGrid.Resources> <sfDatagrid:SfDataGrid.Columns x:TypeArguments="sfDatagrid:Columns"> ... </sfDatagrid:SfDataGrid.Columns> ... </sfDatagrid:SfDataGrid> <StackLayout Grid.Row="1"> <Picker x:Name="picker" Title="Select a monkey"> <Picker.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Baboon</x:String> <x:String>Capuchin Monkey</x:String> <x:String>Blue Monkey</x:String> <x:String>Squirrel Monkey</x:String> <x:String>Golden Lion Tamarin</x:String> <x:String>Howler Monkey</x:String> <x:String>Japanese Macaque</x:String> </x:Array> </Picker.ItemsSource> </Picker> </StackLayout> </Grid> |
Regards,
Karthik Raja
