Xamarin forms:Listview grouping issue

Question

I am trying to implement listview grouping for my following JSON data.

JSON Sample:

{ 
   "cbrainBibleBooksHB":[ { 
        "book":"2 John",
         "cbrainBibleTOList":[ 
            { 
               "bookName":"2 John",
               "chapter":"1",
               "pageUrl":"/edu-bible/9005/1/2-john-1"
            },
            {....}
         ]
      },
      { 
         "book":"3 John",
         "cbrainBibleTOList":[ 
            {  
               "bookName":"3 John",
               "chapter":"1",
               "pageUrl":"/edu-bible/9007/1/3-john-1"
            },
            {...}
         ]
      }
   ]
 }

I am trying to group the JSON data by its book name.

I tried like below:

Model:

public class BibleTestament
    {
        public List<CbrainBibleBooksHB> cbrainBibleBooksHB { get; set; }
    }

    public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
    {
        public string book { get; set; }
        public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
    }

    public class CbrainBibleTOList
    {
        public string chapter { get; set; }
        public string pageUrl { get; set; }
        public string bookName { get; set; }
    }

Viewmodel

HttpClient client = new HttpClient();
                var Response = await client.GetAsync("rest api");
                if (Response.IsSuccessStatusCode)
                {
                    string response = await Response.Content.ReadAsStringAsync();
                    Debug.WriteLine("response:>>" + response);
                    BibleTestament bibleTestament = new BibleTestament();
                    if (response != "")
                    {
                        bibleTestament = JsonConvert.DeserializeObject<BibleTestament>(response.ToString());
                    }
                    AllItems = new ObservableCollection<CbrainBibleBooksHB>(bibleTestament.cbrainBibleBooksHB);

XAML

<ContentPage.Content>
        <StackLayout>
            <ListView 
                HasUnevenRows="True"
                ItemsSource="{Binding AllItems,Mode=TwoWay}"
                IsGroupingEnabled="True">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label 
                                Text="{Binding book}"
                                Font="Bold,20" 
                                HorizontalOptions="CenterAndExpand"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                Margin="3"
                                TextColor="Black"
                                VerticalOptions="Center"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    Orientation="Horizontal">

                                    <Label 
                                        Text="{Binding cbrainBibleTOList.chapter}"
                                        Font="20" 
                                        HorizontalTextAlignment="Center"
                                        VerticalTextAlignment="Center"
                                        HorizontalOptions="CenterAndExpand"
                                        TextColor="Black"
                                        VerticalOptions="Center"/>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label/>
                </ListView.Footer>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

But no data is showing on the UI when running the project. Getting Binding: 'book' property not found on 'System.Object[]', target property: 'Xamarin.Forms.Label.Text' message on output box. It is very difficult to implement grouping for a listview in xamarin forms. Can anyone help me to do this? I have uploaded a sample project here.

Answer 1

You can use the latest BindableLayout of Xamarin.Forms version >=3.5 instead of using grouped Listview with less effort involved.

Update your Model class

public class CbrainBibleBooksHB
{
   public string book { get; set; }
   public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}

XAML:

<ScrollView>
    <FlexLayout
        BindableLayout.ItemsSource="{Binding AllItems}"
        Direction="Column"
        AlignContent="Start">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0"
                            Text="{Binding book}"
                            HorizontalOptions="FillAndExpand"
                            BackgroundColor="LightBlue"/>
                    <StackLayout Grid.Row="1"
                                    BindableLayout.ItemsSource="{Binding cbrainBibleTOList}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Label Text="{Binding chapter}">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding BindingContext.TapCommand, Source={x:Reference Name=ParentContentPage}}" CommandParameter="{Binding .}"/>
                                    </Label.GestureRecognizers>
                                </Label>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</ScrollView>

Note: Here ParentContentPage is the x:Name of parent content page which is used to give reference for command.

ViewModel:

class BibleTestamentViewModel : INotifyPropertyChanged
{
    public ICommand TapCommand { get; private set; }

    public BibleTestamentViewModel()
    {
        TapCommand = new Command(ChapterClickedClicked);
    }

    private void ChapterClickedClicked(object sender)
    {
        //check value inside sender
    }
}

Output:

Answer 2

You can do this way aswell

 <ListView ItemsSource="{Binding Itens}" SeparatorColor="#010d47"  RowHeight="120" x:Name="lvEmpresaPending" SelectionMode="None">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell>
                                                    <StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Nome da Empresa:" FontAttributes="Bold" ></Label>
                                                            <Label Text="{Binding Main.Nome}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="CNPJ da Empresa:" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding Main.Cnpj}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Cargo: " FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding Cargo}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Inicio" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding DataInicio}"></Label>
                                                            <Label Text="Término" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding DataFim}"></Label>

                                                        </StackLayout>

                                                    </StackLayout>
                                                </ViewCell>
                                            </DataTemplate>



public class ModelosPPP
    {
        public Empresa Main { get; set; }
        public string DataInicio { get; set; }
        public string DataFim { get; set; }
        public string Cargo { get; set; }
        public string Status { get; set; }
    }


 public class Empresa
    {
        public string Nome { get; set; }
        public string Cnpj { get; set; }
    }

Answer 3

I tested your demo with static data and there are some issues in your case .

Firstly CbrainBibleBooksHB is a subclass of ObservableCollection ,so you don't need to set the property cbrainBibleTOList any more

public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
{
   public string book { get; set; }
   public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}

Secondly , you set the wrong binding path of the label .

<Label 
   Text="{Binding chapter}"
   ...
   />

Following is my code ,because of I could not accsess to your url so I used the static data.

in xaml

...
<Label 
   Text="{Binding chapter}"
   HeightRequest="30"
   Font="20" 
   HorizontalTextAlignment="Center"
   VerticalTextAlignment="Center"
   HorizontalOptions="CenterAndExpand"
   TextColor="Black"
   VerticalOptions="Center"/>
...

in viewmodel

namespace TestamentSample
{
    public class BibleTestamentViewModel 
    {
        

        public ObservableCollection<CbrainBibleBooksHB> AllItems
        {
            get;set;
        }

        public BibleTestamentViewModel()
        {

            
            var cbrainBibleBooksHB = new CbrainBibleBooksHB() {book = "group1",};

            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "1111" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "2222" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "3333" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "4444" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "5555" });


            var cbrainBibleBooksHB2 = new CbrainBibleBooksHB() { book = "group2", };

            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "6666" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "7777" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "8888" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "9999" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "0000" });

            AllItems = new ObservableCollection<CbrainBibleBooksHB>() {
                cbrainBibleBooksHB,cbrainBibleBooksHB2
            };
        }
       
    }
}

public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
{
  public string book { get; set; }      
}

You should make sure that the object which you download from remote url has the same level with my demo .