This control behaves very poorly

[Lloyd Sheen]

OK I am out of things to try.  When I put the control under a sfTabItem it will not show.

I have the XAML for the page and what I did to test it was create two sfTabItems one with the sfDataGrid and the other with the sfListView.  Both controls share the same ItemsSource.  The listview shows, the datagrid doesn't.

I can put a HeightRequest on the datagrid but that makes no difference.  What really boggles my mind is that since the ListView and DataGrid are both controls in the same software and both display the contents of a list of items why one shows and the other doesn't makes no sense.

If I make a copy of the datagrid and simply place it in the StackLayout (page source is below) then it shows and I have put no HeightRequest on it.

Sample page:

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

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

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

             xmlns:expand="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms"

             xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"

             xmlns:data="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"

             xmlns:accrod="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms"

             xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"

             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"

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

             xmlns:views="clr-namespace:AwesomeApp.Views"

             xmlns:conv="clr-namespace:AwesomeApp.Converters"

             xmlns:models="clr-namespace:AwesomeApp.Models"

             xmlns:local="clr-namespace:AwesomeApp"

             x:Class="AwesomeApp.Views.GameInfo">

    <ContentView.Resources>

        <conv:GetTeamImageSource x:Key="GTIS"></conv:GetTeamImageSource>

    </ContentView.Resources>

    <ContentView.Content>

        <StackLayout Orientation="Vertical">

        <!--<Grid RowDefinitions="30,Auto,Auto,Auto">-->

            <views:NHLAppToolbar HeaderString="Game Recap"></views:NHLAppToolbar>

            <border:SfBorder Grid.Row="1"

                             x:Name="bigScoreDisplay"

                             BorderColor="Black"

                             BackgroundColor="White"

                             BorderWidth="2"

                             CornerRadius="10"

                             HasShadow="True"

                             ShadowColor="Gray"

                             Margin="0,3,0,5" HeightRequest="70" >

                <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" BackgroundColor="Transparent" HeightRequest="40" HorizontalOptions="Center">

                    <Grid.Resources>

                        <Style TargetType="Label">

                            <Setter Property="FontSize" Value="24"></Setter>

                            <Setter Property="FontAttributes" Value="Bold"></Setter>

                            <Setter Property="TextColor" Value="Black"></Setter>

                            <Setter Property="VerticalOptions" Value="Center"></Setter>

                        </Style>

                        <Style TargetType="Image">

                            <Setter Property="HeightRequest" Value="35"></Setter>

                            <Setter Property="WidthRequest" Value="35"></Setter>

                        </Style>

                    </Grid.Resources>

                    <Image Grid.Column="0" Source="{Binding selGameData.gameData.teams.away.name,Converter={StaticResource GTIS}}"

                           Margin="5,0,0,0" ></Image>

                    <Label Grid.Column="1" Text="{Binding selGameData.liveData.linescore.teams.away.goals}"></Label>

                    <Label Grid.Column="2" Text=" @ "></Label>

                    <Label Grid.Column="3" Text="{Binding selGameData.liveData.linescore.teams.home.goals}" Margin="5,0,0,0" ></Label>

                    <Image Grid.Column="4" Source="{Binding selGameData.gameData.teams.home.name,Converter={StaticResource GTIS}}">

                    </Image>

                    <!--<Label Grid.Column="0" Text="{Binding selGameData.gameData.teams.away.name}" Margin="0,0,5,0"></Label>-->

                    <!--<Label Grid.Column="3" Text="{Binding selGameData.gameData.teams.home.name}" Margin="0,0,5,0"></Label>-->

                </Grid>

            </border:SfBorder>

            <border:SfBorder Grid.Row="2" BorderColor="Black"

                                     BackgroundColor="White"

                                     BorderWidth="2"

                                     CornerRadius="15"

                                     HasShadow="True"

                                     ShadowColor="Gray"

                                     Padding="10"

                                     Margin="10"

                                     HeightRequest="-1"

                             IsVisible="true">

                <Label Text="{Binding selGameData.gameDescription}"

                                               HorizontalOptions="FillAndExpand"

                                               TextColor="Black"

                                               BackgroundColor="Transparent"

                                               FontSize="12"

                                               VerticalOptions="CenterAndExpand">

                </Label>

            </border:SfBorder>

            <datagrid:SfDataGrid ItemsSource="{Binding theEvents}"

                                             AutoGenerateColumns="true" >

            </datagrid:SfDataGrid>

            <!--<Grid Grid.Row="3" x:Name="scoringGrid" RowDefinitions="Auto,Auto" IsVisible="false">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="50"/>

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="35"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Image Source="goalLight.png" Margin="3" Aspect="AspectFit">

                        <Image.GestureRecognizers>

                            <TapGestureRecognizer Tapped="ChangeToRecap"/>

                        </Image.GestureRecognizers>

                    </Image>

                    <Label TextColor="Black" Text="Scoring Summary" FontSize="16" Grid.Column="1" VerticalOptions="CenterAndExpand"/>

                </Grid>-->

            <tabView:SfTabView x:Name="teamInfoTabView" DisplayMode="ImageWithText">

                <tabView:SfTabItem Title="Scoring" x:Name="playersSelection" ImageSource="goalLight.png">

                    <tabView:SfTabItem.Content>

                        <listview:SfListView Grid.Row="1"

                                     ItemsSource="{Binding selGameData.liveData.plays.ScorersCollection}"

                                     FocusBorderThickness="0"

                                     IsScrollBarVisible="True"

                                     ItemSpacing="5"

                                     SelectionMode="None"

                                     VerticalOptions="Start"

                                     AutoFitMode="DynamicHeight" >

                            <listview:SfListView.Behaviors>

                                <local:SfListViewGroupingPeriodBehavior/>

                            </listview:SfListView.Behaviors>

                            <listview:SfListView.GroupHeaderTemplate>

                                <DataTemplate>

                                    <ViewCell>

                                        <ViewCell.View>

                                            <StackLayout Orientation="Horizontal" BackgroundColor="#E4E4E4">

                                                <!--<Label Text="Period : "

                                                                 FontSize="22"

                                                                 FontAttributes="Bold"

                                                                 VerticalOptions="Center"

                                                                 HorizontalOptions="Start"

                                                                 Margin="20,0,0,0" />-->

                                                <Label Text="{Binding Key}"

                                                                 FontSize="18"

                                                                 FontAttributes="Bold"

                                                                 VerticalOptions="Center"

                                                                 HorizontalOptions="Start"

                                                                 Margin="20,0,0,0" />

                                            </StackLayout>

                                        </ViewCell.View>

                                    </ViewCell>

                                </DataTemplate>

                            </listview:SfListView.GroupHeaderTemplate>

                            <listview:SfListView.ItemTemplate>

                                <DataTemplate>

                                    <ViewCell>

                                        <ViewCell.View>

                                            <StackLayout Orientation="Vertical">

                                                <StackLayout Orientation="Horizontal"

                                                    BackgroundColor="Transparent"

                                                    Margin="0,0,0,5">

                                                    <Image WidthRequest="30" Source="{Binding teamLogo}" Margin="0,0,10,0"></Image>

                                                    <Label Text="{Binding goalString}"

                                                           FontSize="14" FontAttributes="Bold"

                                                           BackgroundColor="Transparent"

                                                           Padding="0,0,0,4">

                                                    </Label>

                                                </StackLayout>

                                                <StackLayout>

                                                    <Label Grid.Row="1" Text="{Binding assistsString}" TextColor="Black" FontSize="12" HorizontalOptions="Start"

                                                            VerticalOptions="Center" Opacity="87" Margin="40,0,0,0"/>

                                                    <Label Grid.Row="1" Text="{Binding goalieString}" TextColor="Black" FontSize="12" HorizontalOptions="Start"

                                                           IsVisible="{Binding showGoalie}"

                                                            VerticalOptions="Center" Opacity="87" Margin="40,0,0,0"/>

                                                </StackLayout>

                                            </StackLayout>

                                        </ViewCell.View>

                                    </ViewCell>

                                </DataTemplate>

                            </listview:SfListView.ItemTemplate>

                        </listview:SfListView>

                </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

                <tabView:SfTabItem Title="Events DG">

                    <tabView:SfTabItem.Content>

                        <datagrid:SfDataGrid ItemsSource="{Binding theEvents}"

                                             AutoGenerateColumns="true"

                                             HeightRequest="500"></datagrid:SfDataGrid>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

                <tabView:SfTabItem Title="Events DG">

                    <tabView:SfTabItem.Content>

                        <listview:SfListView ItemsSource="{Binding theEvents}"></listview:SfListView>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

            </tabView:SfTabView>

            <!--</Grid>-->

        <!--</Grid>-->

        </StackLayout>

    </ContentView.Content>

</ContentView>

[Suja Venkatesan]

Hi Lloyd, 

Thanks  you for using Syncfusion product. 

Currently, we are validating the reported issue in our end. we are in need of two more business days to validate this properly. We will update the further details on or before December 6, 2021. We appreciate your patience and understanding.  

Regards, 

Suja. 

[Lloyd Sheen]

Another problem is that if there is no data to show the control does not show up with just the headers.  No data should still show the headers for the control.

[Lakshmi Natarajan]

Hi Lloyd, 

 

Sorry for the delay caused. 

 

#Regarding DataGrid not loaded when loading inside SfTabItem 

 

We have checked the reported query on our side. We would like to let you know that we could replicate the reported scenario on our side. Currently, we are analyzing the reported scenario in our source level. We will check and update you further details in two business day (December 8, 2021). We appreciate your patience until then. 

 

#Regarding  if there is no data to show the control does not show up with just the headers 

 

We assume that your requirement is not to load the headers when data is not available for the SfDataGrid. If yes, you can achieve your requirement by cancelling the column generation in the AutoGeneratingColumn event. 

 

Please refer to our user guidance document regarding the event, 

UG link: https://help.syncfusion.com/xamarin/datagrid/columns#customize-automatically-generated-columns 

 

Please refer to the following code snippets to achieve your requirement, 

 

<sfgrid:SfDataGrid x:Name="datagrid" ItemsSource="{Binding OrdersInfo}" 

                AutoGenerateColumns="True" BackgroundColor="Yellow" 

                AutoGeneratingColumn="datagrid_AutoGeneratingColumn"> 

</sfgrid:SfDataGrid> 

 

 

private void datagrid_AutoGeneratingColumn(object sender, Syncfusion.SfDataGrid.XForms.AutoGeneratingColumnEventArgs e) 

{             

    //Cancel generating columns if no data available for datagrid. 

    if(datagrid.View != null && datagrid.View.Records != null && datagrid.View.Records.Count <= 0) 

    { 

        e.Cancel = true; 

    } 

} 

 

 

If this is not your requirement then please revert us back with your requirement in detail which will be helpful for us to understand the query better and provide you with the best possible solution. 

 

Regards, 

Lakshmi Natarajan 

 

[Suja Venkatesan]

Hi Lloyd, 

We deeply regret for the inconvenience caused. Due to complexity in analysis of the reported issue “DataGrid not loaded when loading inside SfTabItem”, we are in need of two more business days to validate this properly. We will update the further details on or before December 10, 2021. We appreciate your patience and understanding.  

Regards, 

Suja. 

[Suja Venkatesan]

Hi Lloyd, 

Thanks for your patience. 

We have logged a bug report for the reported issue “SfDataGrid not visible inside SfTabView". We will fix the issue and include the fix in our weekly nuget which is scheduled on January 4,2022. We will let you know once it is released with the fix. We appreciate your patience until then.

You can also track the status of the report from the below link.   

Feedback Link: SfDataGrid not visible inside SfTabView in Xamarin.Forms | Feedback Portal (syncfusion.com) 

Regards,  

Suja.  

[Suja Venkatesan]

Hi Lloyd,  

Regarding the "SfDataGrid not showing in SfTabView" 

After the deep analysis, we found this issue occurs when IsClipsToBounds property set to true for the SfDataGrid. We are able to reproduce the same issue in StackLayout with IsClipToBounds as true and we have reported this issue to framework team. Please follow up the below github for further updates. Also, we will let you know once we got a solution from framework side.

https://github.com/xamarin/Xamarin.Forms/issues/7464 

Regards,
Suja