Is it possible to display SfDataGrid after other Xamarin's element ?

[Yasahbi]

Hi,

I'm trying to display a title with some informations and then display my DataGrid, the problem is that the datagrid don't appear on my page.

Here's my code : 

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

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

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

                            x:Class="Kerhis.Domopig.View.Views.MouvementAnimauxPage"

                            xmlns:controls="clr-namespace:Kerhis.Core.Forms.Controls;assembly=Kerhis.Core.Forms"

                            xmlns:cr="clr-namespace:Kerhis.Domopig.View.Controls;assembly=Kerhis.Domopig.View"

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

                            BindingContext="{Binding MouvementAnimaux, Source={StaticResource Locator}}"

                            Title="Mouvements Animaux">

  <controls:KerhisContentPage.Content>

    <ScrollView>

    <StackLayout>

      <Grid>

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width="Auto"/>

          <ColumnDefinition Width="1*"/>

          <ColumnDefinition Width="1*"/>

          <ColumnDefinition Width="1*"/>

          <ColumnDefinition Width="1*"/>

          <ColumnDefinition Width="1*"/>

          <ColumnDefinition Width="1*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

          <RowDefinition Height="Auto"/>

          <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

      

        <Image Source="salle.png" Grid.Column="0" Grid.Row="0"/>

        <Label Text="Nom de la salle : " FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="1" Grid.Row="0"/>

        <Label Text="{Binding Salle.LibelleSalle}" FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="2" Grid.Row="0"/>

        <Label Text="Batiment : " FontSize="Medium" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="3" Grid.Row="0"/>

        <Label Text="{Binding Salle.Batiment.LibelleBatiment}" FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="4" Grid.Row="0"/>

        <Label Text="Site : " FontSize="Medium" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="5" Grid.Row="0"/>

        <Label Text="{Binding Salle.Site.LibelleSite}" FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="6" Grid.Row="0"/>

        <Image Source="cochon.png" Grid.Column="0" Grid.Row="1"/>

        <Label Text="{Binding NombreAnimaux}" FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>

      </Grid>

    

      <cr:KerhisDataGrid AutoGenerateColumns="False"

                         ItemsSource="{Binding ListeMouvementAnimaux}"

                         ColumnSizer="Star"

                         SelectionMode="SingleDeselect">

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

          <syncfusion:GridTextColumn HeaderText="Date"

                                     MappingName="DateMouvement"

                                     TextWrapping="WordWrap"/>

        

          <syncfusion:GridTextColumn HeaderText="Effectif J-1"

                                     MappingName="AncienEffectif"

                                     TextWrapping="WordWrap"/>

          <syncfusion:GridTextColumn HeaderText="Effectif J-J"

                                     MappingName="EffectifActuel"

                                     TextWrapping="WordWrap"/>

          <syncfusion:GridTextColumn HeaderText="Différence"

                                     MappingName="Difference"

                                     TextWrapping="WordWrap"/>

          <syncfusion:GridTextColumn HeaderText="Qualification"

                                     MappingName="CodeQualificationMouvement"

                                     TextWrapping="WordWrap"/>

          <syncfusion:GridTextColumn HeaderText="N° Bon Uniporc associé"

                                     MappingName="IDBordereau"

                                     TextWrapping="WordWrap"/>

          <syncfusion:GridTextColumn HeaderText="Commentaire"

                                     MappingName="Commentaire"

                                     TextWrapping="WordWrap"/>

        </syncfusion:SfDataGrid.Columns>

      </cr:KerhisDataGrid>

    </StackLayout>

    </ScrollView>

  </controls:KerhisContentPage.Content>

  

  

</controls:KerhisContentPage>

If anyone know what's the problem, please help me

Thanks !

[Harikrishnan N]

Hi Yasahbi,  

Thank you for using Syncfusion Products.  

We have analyzed your query and you can get this fixed simply by setting the SfDataGrid.VerticalOptions as “FillAndExpand”. Please refer the below code example for the same.  

 

   

<?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:local ="clr-namespace:StackLayoutSample;assembly=StackLayoutSample"   

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

             x:Class="StackLayoutSample.StackPage">   

  <ContentPage.BindingContext>   

    <local:ViewModel x:Name="viewModel" />   

  </ContentPage.BindingContext>   

     

  <ContentPage.Content>   

    <ScrollView>   

      <StackLayout VerticalOptions="FillAndExpand">   

        <Label Text="Stack Layout Demo" FontSize="20" HeightRequest="50"HorizontalTextAlignment="Center"/>   

        <syncfusion:SfDataGrid x:Name="dataGrid"   

                               VerticalOptions="FillAndExpand"   

                               ItemsSource="{Binding ItemList}"   

                               ColumnSizer="Star"   

                               SelectionMode="SingleDeselect" />   

      </StackLayout>   

    </ScrollView>   

  </ContentPage.Content>   

</ContentPage>   

    

 
We have also published a KB for the same and you can refer it from the following link. 
https://www.syncfusion.com/kb/6169/how-to-load-sfdatagrid-in-a-stacklayout   

When you load a custom view inside a StackLayout, the height to render the custom view will be passed as zero by the StackLayout which results in the above issue. Hence to get this fixed you have to set the LayoutOptions for the custom view.

Regards,  
Harikrishnan   

[Yasahbi]

Hi Harikrishnan !

I found the answer just before you replied me and i was about to write it here.

But thanks for your time anyway ! :)

[Ashok N]

Hi Yasahbi, 

Thanks for your update. Please let us know if you require further assistance on this.  

Regards,  

Ashok  

[Kirill]

Hi, i have this problem, although I set the values ​​to FillAndExpand

[Subburaj Pandian Veluchamy]

Hi Kirill, 

 

We have prepared sample based on your requirement “Loading Xamarin element along with the SfDataGrid” in Xamarin.Forms. In the sample, we have loaded SearchBar and DataGrid in the Stack layout, it has rendered as expected without any issue.  Please find the sample by the following link.  

 

Sample link: DataGridSample 

 

Kindly check the sample, If the sample doesn’t meet your requirement, kindly modify the sample based on your scenario and revert us back with more details. It will be helpful for us to check on it and provide you the solution.  

 

Regards,
Subburaj Pandian V