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

How to show a pop up right above or below the selected item in a list view

How do I achieve what is shown in the very first page https://help.syncfusion.com/xamarin/sfpopuplayout/overview ? I can't find a working sample for this. All the tutorials are using PopupLayout.Show right in the middle of the screen. I don't want that. I want to show the pop up right above or below the selected item in ListView

1. In ItemSelected(object sender, SelectedItemChangedEventArgs e) , the sender is the ListView itself and the e.SelectedItem is the View Model object. So I can't access the View to be parameter for .ShowRelativeToView. How do I access the selected item View object. Can someone please provide a sample?

2. How do I make SfPopupLayout smart enough to show the popup above the selected item if it's near the bottom of the screen and vice versa?

Thanks,

3 Replies

JP Jagadeesan Pichaimuthu Syncfusion Team June 17, 2019 10:36 AM UTC

Hi Hung Ho, 
  
Thank you for contacting Syncfusion Support. 
  
We have checked your query. 
  
Regarding your first query: “1. In ItemSelected(object sender, SelectedItemChangedEventArgs e) , the sender is the ListView itself and the e.SelectedItem is the View Model object. So I can't access the View to be parameter for .ShowRelativeToView. How do I access the selected item View object. Can someone please provide a sample? 
  
You can achieve your requirement by using SfListView. In ItemTapped event you can get the view. 
  
Refer the below code for reference: 
  
  
var listviewItem = VisualContainer.Children.FirstOrDefault(x => x.BindingContext == e.ItemData) as ListViewItem; 
if (listviewItem != null) 
{ 
               //// You can customize your code here. 
} 
  
  
Regarding your second query: “2. How do I make SfPopupLayout smart enough to show the popup above the selected item if it's near the bottom of the screen and vice versa? 
  
You can achieve your requirement by showing the popup at XY position. 
  
  
private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
{ 
               if (e.ItemType != ItemType.Record) 
               { 
                              return; 
               } 
  
               var listviewItem = VisualContainer.Children.FirstOrDefault(x => x.BindingContext == e.ItemData) as ListViewItem; 
               if (listviewItem != null) 
               { 
                              //// You can customize your code here. 
               } 
  
               var itemIndex = (this.listView.BindingContext asContactsViewModel).Contactsinfo.IndexOf(e.ItemData as ContactInfo); 
               var visibleLine = this.listView.GetVisualContainer().ScrollRows.GetVisibleLineAtLineIndex(itemIndex); 
               var point = this.listView.Y + visibleLine.ClippedOrigin + visibleLine.Size; 
  
               if (point + 140 <= this.listView.Height + 25) 
               { 
                              this.popupLayout.Show(this.listView.X, this.listView.Y + visibleLine.ClippedOrigin + visibleLine.ClippedSize + this.GetRelativeYPoint("top")); 
               } 
               else 
               { 
                              this.popupLayout.Show(this.listView.X, point - this.GetRelativeYPoint("bottom")); 
               } 
} 
  
  
  
We have prepared a sample based on your requirement and you can download it from the below sample. 
  
Regards, 
Jagadeesan


DB Dirk Bozza September 7, 2021 01:05 PM UTC

If I use grouping for the listview the demo doesn´t work. In the first group the y position is to high, in the second group it doesn´t work completely and depends on the scrolling position of the items and expand/collapsed state of the groups. Is there a solution with grouped items?


sflistview.PNG



SV Suja Venkatesan Syncfusion Team September 8, 2021 01:02 PM UTC

Hi Dirk, 

Thank you for contacting Syncfusion support, 

We checked the reported issue. In our previous sample, we used to get item index from BindingContext which is not recommended way. Due to this, we are getting incorrect index when group is added and popup is showing on incorrect position. So we suggest you to use DisplayItems.IndexOf(data) method to get the exact visible index with and without groups. We have attached the modified sample in the following link for your reference. 


Please refer the following UG Link of DisplayItems.IndexOf method. 

Please let us know if you need further assistance. 

Regards, 
Suja. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon