Using SQlite to bind GroupedItems Template but only getting GroupNames - sqlite

Question

This code is from the datasource class. I am fetching the list of customers from the SQLite database and storing it in ObservableCollection. Using GetGroups() I am creating the groups based on some property:
public ObservableCollection<CustomerDetails> GetAllCustomers()
{
using (var con = new SQLiteConnection(app.DBPath))
{
ObservableCollection<CustomerDetails> newCol = new ObservableCollection<CustomerDetails>(con.Query<CustomerDetails>("Select * from CustomerDetails"));
return newCol;
}
}
public IEnumerable<IGrouping<int,CustomerDetails>> GetGroups()
{
return GetAllCustomers().OrderBy(x=>x.CustomerName).GroupBy(x=>x.CustomerPropertyType);
}
This is how I am binding the Grid View
CustomerImplementation objCustomerImp = new CustomerImplementation();
var all = objCustomerImp.GetGroups();
this.DefaultViewModel["Groups"] = all;
XAML File:
CustomerName, ContactNo1 and EmailId are properties inside DataSource. All are bound in the code above.
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"/>
<GridView
x:Name="itemGridView"
IsItemClickEnabled="True"
IsSwipeEnabled="True"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding Mode=OneWay, Source={StaticResource groupedItemsViewSource}}"
SelectionMode="Single"
SelectedItem="0">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="320" Height="240">
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding CustomerName}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="48" Margin="15,0,15,0"/>
<TextBlock Text="{Binding ContactNo1}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="48" Margin="15,0,15,0"/>
<TextBlock Text="{Binding EmailId}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="48" Margin="15,0,15,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Key}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>

Answer 1

I believe SQLite-net is implemented lazily, so the query doesn't actually give any results until you try to access the items in the collection. Try putting ToList() at the end of the Query call:
public ObservableCollection<CustomerDetails> GetAllCustomers()
{
using (var con = new SQLiteConnection(app.DBPath))
{
// add ToList() to query to instantiate the results
ObservableCollection<CustomerDetails> newCol = new ObservableCollection<CustomerDetails>(con.Query<CustomerDetails>("Select * from CustomerDetails").ToList());
return newCol;
}
}

Answer 2

I recreated your solution and found the problem in DefaultViewModel. Use your own implementation of DefaultViewModel, or call it MainViewModel, which implements INotifyPropertyChanged, e.g.:
public class MainViewModel : INotifyPropertyChanged
{
private IEnumerable<IGrouping<int, CustomerDetails>> groups = null;
public IEnumerable<IGrouping<int, CustomerDetails>> Groups
{
get { return groups; }
private set { Set(ref groups, value); }
}
#region INotifyPropertyChanged implementation
public event PropertyChangedEventHandler PropertyChanged;
private bool Set<T>(ref T storage, object value, [CallerMemberName] string propertyName = null)
{
if (object.Equals(storage, value))
return false;
storage = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
return true;
}
#endregion
}
Then set the DataContext of your Page to an instance of MainViewModel, and set the Groups property with data you want (should be in MainViewModel too, e.g., with some LoadGroups method). CollectionViewSource in page resources references to Groups property of your MainViewModel and you will see your data in the GridView.