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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

129938 Apr 11,2017 03:02 AM Apr 13,2017 12:38 AM Xamarin.Forms 3
loading
Tags: SfListView
Samir Asaf
Asked On April 11, 2017 03:02 AM

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);

}
}


Samir Asaf
Replied On April 11, 2017 06:30 AM

* 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.

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On April 13, 2017 12:38 AM

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. 


Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On April 13, 2017 12:38 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;