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

SfListView:How do I implement nested list views with grouping on both levels?

Hi, I was unable to understand the attached example.

I am trying to implement it as  a listview inside another, each being grouped based on different properties



<listView:SfListView   x:Name ="outerList"
                  GroupHeaderSize="40"
                  ItemsSource="{Binding GroupedList}" 
                  SelectionMode="None">

      <listView:SfListView.DataSource >
        <dataSource:DataSource>
          <dataSource:DataSource.GroupDescriptors>
            <dataSource:GroupDescriptor PropertyName="GroupName"/>
          </dataSource:DataSource.GroupDescriptors>
        </dataSource:DataSource>
      </listView:SfListView.DataSource>

      <listView:SfListView.GroupHeaderTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <StackLayout>
                     <Label Text="{Binding Key}"/>
              </StackLayout>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </listView:SfListView.GroupHeaderTemplate>

      <listView:SfListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
    
            <listView:SfListView   
                   x:Name ="innerList"
                   ItemsSource="{Binding Source={x:Reference outerList}, Path=BindingContext.UserList}">


               <listView:SfListView.DataSource >
                     <dataSource:DataSource>
                            <dataSource:DataSource.GroupDescriptors>
                                   <dataSource:GroupDescriptor PropertyName="Role"/>
                            </dataSource:DataSource.GroupDescriptors>
                     </dataSource:DataSource>
              </listView:SfListView.DataSource>

              <listView:SfListView.GroupHeaderTemplate>
                <DataTemplate>
                  <ViewCell>
                    <ViewCell.View>
                      <StackLayout>
                             <Label Text="{Binding Key}" />
                      </StackLayout>
                    </ViewCell.View>
                  </ViewCell>
                </DataTemplate>
              </listView:SfListView.GroupHeaderTemplate>

              <listView:SfListView.ItemTemplate>
                <DataTemplate>
                  <ViewCell>
                    <ViewCell.View>
                        //viewcell code goes here
                    </ViewCell.View>
                  </ViewCell>
                </DataTemplate>
              </listView:SfListView.ItemTemplate>
            </listView:SfListView>

            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </listView:SfListView.ItemTemplate>
    </listView:SfListView>

Here are the two models:

public class UserViewModel
    {
        public int GroupId { get; set; }
        public string GroupName { get; set; }
        public List<Member> UserList { get; set; } = new List<Member>();
    }

public class Member
    {
        public int RoleId { get; set; }
        public string RoleName { get; set; }
        public string Name { get; set; }
public string Phone { get; set; }

    }
private ObservableCollection<UserViewModel> _groupedMembers = new ObservableCollection<UserViewModel>();

    public ObservableCollection<UserViewModel> GroupedList
{
get { return _groupedMembers; }
set
{
_groupedMembers = value;
RaisePropertyChanged(() => GroupedList);

}
}


3 Replies

SA Samir Asaf April 11, 2017 10:30 AM UTC

* example :  http://www.syncfusion.com/downloads/support/forum/128102/ze/ListViewSample-1486961937  Plus the aforementioned sample doesn't work as expected. Check the image:    https://ibb.co/fisno5  Please reply ASAP.


MK Muthu Kumaran Gnanavinayagam Syncfusion Team April 13, 2017 04:38 AM UTC

Hi Samir, 
 
Thank you for using Syncfusion products. 
 
Query 1: “Achieve nested listview in SfListView” 
 
We have prepared the sample based on your requirements ”Achieve nested listview in SfListView” with the given information and code snippets. We have achieved the nested ListView by maintaining an underlying collection in ObservableCollection in the ViewModel for two models CustomerInfo and EmployeeInfo, bind it to each ListView’s. For your reference, we have attached the sample link below. 
 
 
Query 2 : “Alignment issue when using multi-grouping” 
 
SfListView does not have support for multi-grouping, so it can achieved in sample by adjusting the “Margin” of the View in the DataTemplate by grouping level. Due to facing the framework (Xamarin.Forms.Andriod) issue when adjust the Margin while reuse the item, the issue happened and we are checking on that issue. Hence, you can achieve your requirement by adjusting the “Padding” of the View in DataTemplate instead of adjusting the Margin. We have prepared the sample based on this and you can download it from the below location, 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu Kumaran. 



MK Muthu Kumaran Gnanavinayagam Syncfusion Team April 13, 2017 04:38 AM UTC

Hi Samir, 
 
Thank you for using Syncfusion products. 
 
Query 1: “Achieve nested listview in SfListView” 
 
We have prepared the sample based on your requirements ”Achieve nested listview in SfListView” with the given information and code snippets. We have achieved the nested ListView by maintaining an underlying collection in ObservableCollection in the ViewModel for two models CustomerInfo and EmployeeInfo, bind it to each ListView’s. For your reference, we have attached the sample link below. 
 
 
Query 2 : “Alignment issue when using multi-grouping” 
 
SfListView does not have support for multi-grouping, so it can achieved in sample by adjusting the “Margin” of the View in the DataTemplate by grouping level. Due to facing the framework (Xamarin.Forms.Andriod) issue when adjust the Margin while reuse the item, the issue happened and we are checking on that issue. Hence, you can achieve your requirement by adjusting the “Padding” of the View in DataTemplate instead of adjusting the Margin. We have prepared the sample based on this and you can download it from the below location, 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu Kumaran. 


Loader.
Live Chat Icon For mobile
Up arrow icon