Data grid does not show inside relative layout

[Abraham Esrit Ines Rivera Villegas]

I have a SFDataGrid inside a StackLayout and the Stack Layout is inside a Relative Layout, but the SFDataGrid does no tshow, only when the device is in horitonzal position appears, and when put the device back in vertical position only the columns appears

This is mi XAML page

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 

             x:Class="DemoActivos.Levantamiento"

             Title="Levantamiento"

             BackgroundColor="White">

    <ContentPage.Content>

        <ScrollView Orientation="Vertical"

                    HorizontalOptions="Fill"

                    VerticalOptions="Fill">

            <RelativeLayout x:Name="relativeLayout">

                <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical" 

                             Spacing="15">

                    <StackLayout.Margin>

                        <OnPlatform x:TypeArguments="Thickness">

                            <On Platform="Android" Value="20, 20, 20, 20"/>

                            <On Platform="iOS" Value="20, 40, 20, 20"/>

                        </OnPlatform>

                    </StackLayout.Margin>

                    <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                        <Label x:Name="lblEmpleado" HorizontalOptions="StartAndExpand" FontSize="Large" />

                    </StackLayout>

                    <!--Empleado-->

                    <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                        <Entry x:Name="EntryEmpleado" Placeholder="Numero empleado" PlaceholderColor="LightGray" 

                       HorizontalOptions="FillAndExpand" TextChanged="EntryEmpleado_TextChanged" />

                        <Image x:Name="imgSearchEmployee" Source="buscar.png" HorizontalOptions="End" WidthRequest="35" HeightRequest="35"/>

                    </StackLayout>

                    <!--Nombre empleado-->

                    <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                        <Entry x:Name="EntryEmpleadoNombre" Placeholder="Nombre empleado" PlaceholderColor="LightGray" IsEnabled="false"

                               HorizontalOptions="FillAndExpand"/>

                        <Image x:Name="imgUsuario" Source="usuario.png" HorizontalOptions="End" WidthRequest="35" HeightRequest="35"/>

                    </StackLayout>

                    <!--Codigo de barras-->

                    <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                        <Entry x:Name="EntryCodigoBarras" Placeholder="Codigo de barras" PlaceholderColor="LightGray" 

                               HorizontalOptions="FillAndExpand"/>

                        <Image x:Name="imgScanner" Source="escaner.png" HorizontalOptions="End" WidthRequest="35" HeightRequest="35"/>

                    </StackLayout>

                    <syncfusion:SfDataGrid x:Name="DataGrid" 

                                           ColumnSizer="Star" 

                                           RelativeLayout.XConstraint="{ConstraintExpression Constant=0}"

                                           RelativeLayout.YConstraint="{ConstraintExpression Constant=315}"

                                           RelativeLayout.WidthConstraint="{ ConstraintExpression Constant=300}"

                                           RelativeLayout.HeightConstraint="{ ConstraintExpression Constant=300}"

                                           AutoGenerateColumns="False" 

                                           VerticalOptions="Fill"

                                           HorizontalOptions="Fill">

                        <syncfusion:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns" VerticalOptions="FillAndExpand">

                            <syncfusion:GridTextColumn HeaderText="ActivoId" MappingName="ActivoId" IsHidden="True" />

                            <syncfusion:GridTextColumn HeaderText="Co. barras" MappingName="CodigoBarrasParticular" />

                            <syncfusion:GridTextColumn HeaderText="Estatus" MappingName="NombreEstatus" />

                            <syncfusion:GridImageColumn HeaderText="Validacion" MappingName="EstatusIdSource" />

                            <syncfusion:GridImageColumn HeaderText="Estatus Id" MappingName="EstatusId" IsHidden="True" />

                        </syncfusion:SfDataGrid.Columns>

                    </syncfusion:SfDataGrid>

                </StackLayout>

                <Image x:Name="imgLevantamiento" Source="levantamiento.png"  Margin="10" HeightRequest="60" WidthRequest="60" />

                <ContentView x:Name="LoadBackGround"

                            BackgroundColor="#222222" Opacity="0.5"

                            IsVisible="False">

                </ContentView>

                <ActivityIndicator x:Name="Load"/>

                <!--AbsoluteLayout.LayoutFlags="PositionProportional"

                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"-->

                

                <!--AbsoluteLayout.LayoutFlags="All"

                            AbsoluteLayout.LayoutBounds="0,0,1,1"-->

                

                <!--AbsoluteLayout.LayoutFlags="PositionProportional"

                                    AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"-->

            </RelativeLayout>

        </ScrollView>

    </ContentPage.Content>

</ContentPage>

[Ashok N]

Hi Abraham, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your code snippet and reported issue is not due to SfDataGrid. We need to set the X, Y, Width and Height Constraint while using RelativeLayout, we have modified the sample based on your requirement, please refer the below code example. 

 

<ContentPage.Content> 

        <ScrollView> 

            <RelativeLayout x:Name="relativeLayout"> 

                <StackLayout Orientation="Vertical" RelativeLayout.HeightConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=500}" 

                           RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=500}" 

                             RelativeLayout.XConstraint ="{ConstraintExpression Type=RelativeToParent, Property=X, Constant=0}" 

                           RelativeLayout.YConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=0}" 

                            Spacing="15" > 

 

Sample location: http://www.syncfusion.com/downloads/support/forum/133137/ze/XamarinForms-50918969  

 

Regards, 

Ashok

[Abraham Esrit Ines Rivera Villegas]

Since the size of the StackLayout is fixed the grid will no longer grow when the user loads data, the problem happens when the device is in a horizontal position, vertically there are no problems because I have enough space for the grid to be seen, but in horizontal position the grid is very small and you can only see all the data using the scroll view of the grid and this gives bad appearance, besides the last three rows of the grid does not show in device horizontal position.

[Ashok N]

Hi Abraham,  

  

Thanks for your update. Please share your both Horizontal and vertical screenshot? that would be more helpful for us to layout our SfDataGrid based on your requirment within RelativeLayout. 

 

Regards, 

Ashok