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. Image for the cookie policy date

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

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 !

5 Replies

HN Harikrishnan N Syncfusion Team July 29, 2016 12:11 PM UTC

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  
 



YA Yasahbi July 29, 2016 12:40 PM UTC

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 ! :)


AN Ashok N Syncfusion Team August 1, 2016 05:21 AM UTC

Hi Yasahbi, 
Thanks for your update. Please let us know if you require further assistance on this.  
Regards,  
Ashok  



KI Kirill February 28, 2019 10:00 AM UTC

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


SP Subburaj Pandian Veluchamy Syncfusion Team March 1, 2019 09:00 AM UTC

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  


Loader.
Up arrow icon