Nested List view in Xamarin forms xaml with MVVM

Question

I want nested list view like below in xamarin forms

I am using XAML and wants to bind using MVVM

My model as below

public class LineItemTaxDto 
    {
        public int InvoiceLineItemId { get; set; }
        public int InvoiceId { get; set; }
        public int TaxId { get; set; }
        public decimal TaxRate { get; set; }
        public decimal TaxAmount { get; set; }
        public string TaxName { get; set; }
        public ObservableCollection<LineItemTaxDto> SubTaxes { get; set; }

    }

In this Group tax is my main taxname and it contains sub taxes (VAT, GST).

EDIT

My xaml code is below

<ListView x:Name="TaxListView" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid RowSpacing="0" ColumnSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
                                    <Label Text="{Binding Source={x:Reference TaxListView}, Path=BindingContext.CurrentOutlet.ReceiptTemplate.TaxLable, StringFormat='{0} ('}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                                    <Label Text="{Binding TaxName, StringFormat='{0})'}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                </StackLayout>
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />


                                 <ListView x:Name="TaxListView2" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <Grid RowSpacing="0" ColumnSpacing="0">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*" />
                                                        <ColumnDefinition Width="150" />
                                                    </Grid.ColumnDefinitions>
                                                    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
                                                        <Label Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                                    </StackLayout>
                                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                                                </Grid>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

But is not working. please help me to what I am going wrong. Thanks in advance

Nested ListViews aren't a good choice. If your need is to group, Group then (see this sample: developer.xamarin.com/samples/xamarin-forms/…). — Diego Rafael Souza
– Diego Rafael Souza, Commented Jul 31, 2017 at 14:26
@DiegoRafaelSouza, Please see my model and let me know is that possible grouping in this? — Ziyad Godil
– Ziyad Godil, Commented Aug 3, 2017 at 11:07
You model seems incomplete to me. To group is a two-hand strategy, on at the page other at viewmodel... Can you edit your question simplifying the scenario? Maybe I can help then. — Diego Rafael Souza
– Diego Rafael Souza, Commented Aug 3, 2017 at 14:13

Ziyad Godil · Accepted Answer · 2017-08-18 12:36:52Z

Solved

I solve above result using single list no need to nested list view. My code as below.

My xaml code look like:

<ListView 
                x:Name="TaxListView"
                ItemsSource="{Binding Invoice.ReceiptTaxList}" 
                Grid.Row="2" 
                Grid.Column="0" 
                Grid.ColumnSpan="2"
                VerticalOptions="FillAndExpand" 
                HorizontalOptions="FillAndExpand"
                SeparatorVisibility="None"
                HasUnevenRows="false"
                RowHeight="35"
                >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid RowSpacing="0" ColumnSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

My view model code look like:

    var TMPTaxList = invoice.InvoiceLineItems.Where(x => x.TaxId > 1).Select(x =>
              {
                  return new KeyValuePair<LineItemTaxDto, ObservableCollection<LineItemTaxDto>>(new LineItemTaxDto()
                  {
                      InvoiceLineItemId = x.Id,
                      InvoiceId = x.InvoiceId,
                      TaxId = x.TaxId,
                      TaxRate = x.TaxRate,
                      TaxAmount = x.TaxAmount,
                      TaxName = "Tax (" + x.TaxName + ")"
                  }, x.LineItemTaxes);
              });

        var taxes = new ObservableCollection<LineItemTaxDto>();
        foreach (var tax in TMPTaxList.GroupBy(tax => tax.Key.TaxId)
  .Select(grp => grp.First()))
        {
            taxes.Add(tax.Key);
            foreach (var subtax in tax.Value.Where(x => x.TaxId > 0))
            {
                taxes.Add(subtax);
            }
        }

        invoice.ReceiptTaxList = taxes;

Collectives™ on Stack Overflow

Nested List view in Xamarin forms xaml with MVVM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related