Is it possible to add button inside the ListView and tap for an popup?

[asolute dev]

Hi, I am using ListView with item tapped event to go to another page currently. Now, I want to add a button inside my ListView with predefined amount as label, and click on the button, it will show a popup and user can edit some data accordingly. I am not sure how to achieve that.

[Lakshmi Natarajan]

Hi Asolute, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “How to show popup on Button click” from our side. You can load the SfListView in the SfPopupLayout.Content and in the Button.Clicked event you can show the PopupView. Please refer the following code snippets for more reference, 

 

<sfPopup:SfPopupLayout x:Name="popupLayout"> 

            <sfPopup:SfPopupLayout.PopupView> 

                        <sfPopup:PopupView WidthRequest="220" HeightRequest="120" ShowFooter="False"> 

                                    <sfPopup:PopupView.ContentTemplate> 

                                                <DataTemplate> 

                                                            <Label Text="Button tapped" BackgroundColor="White" TextColor="Black" HorizontalTextAlignment="Center"/> 

                                                </DataTemplate> 

                                    </sfPopup:PopupView.ContentTemplate> 

                        </sfPopup:PopupView> 

            </sfPopup:SfPopupLayout.PopupView> 

            <sfPopup:SfPopupLayout.Content> 

                        <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> 

                                    <syncfusion:SfListView.ItemTemplate > 

                                                <DataTemplate> 

                                                            <Grid x:Name="grid"> 

                                                                        <Grid.ColumnDefinitions> 

                                                                                    <ColumnDefinition Width="70" /> 

                                                                                    <ColumnDefinition Width="*" /> 

                                                                        </Grid.ColumnDefinitions> 

                                                                        <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> 

                                                                        <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> 

                                                                                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> 

                                                                                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> 

                                                                                    <Button Text="Button" Clicked="Button_Clicked" HorizontalOptions="End"/> 

                                                                        </Grid> 

                                                            </Grid> 

                                                </DataTemplate> 

                                    </syncfusion:SfListView.ItemTemplate> 

                        </syncfusion:SfListView> 

            </sfPopup:SfPopupLayout.Content> 

</sfPopup:SfPopupLayout> 

 

public partial class MainPage : ContentPage 

{ 

            public MainPage() 

            { 

                        InitializeComponent(); 

            } 

 

            private void Button_Clicked(object sender, EventArgs e) 

            { 

                        popupLayout.Show(); 

            } 

} 

 

We have attached the sample for your requirement in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/160247-1825369072 

 

You can also refer to our user guidance document regarding the same, 

Ug links: 

https://help.syncfusion.com/xamarin/popup/faq#open-sfpopuplayout-in-itemtapped-event-of-sflistview 

https://help.syncfusion.com/xamarin/popup/popup-positioning 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[asolute dev]

Hi Lakshmi Natarajan,

If a button exist inside list view item, how do I differentiate item list view tapped event and and also the button onclick event? Will it be automatic?

Regards,

Asolute

[Lakshmi Natarajan]

Hi Asolute, 

 

Thank you for the update. 

 

We would like to inform you that if any interactable control like Button loaded inside the SfListView.ItemTemplate and tapping the button, the child (Button) will handle the touch and the ListView will not get the touch notifications. The touch flow is handled using Tunneling-Bubbling concept performs in Android and iOS platforms. Since, the touch will not pass to the ListView because gesture handled inside the ItemTemplate of ListView itself. This is the framework behavior. And, tap on a non-interactable controls loaded in the ItemTemplate, the touch will be passed to the ListView and ItemTapped event will be fired. 

 

You can also refer to the related documents from the following links, 

KB links: 

https://www.syncfusion.com/kb/11713/how-to-handle-click-action-with-tap-command-in-xamarin-forms-listview-sflistview 

https://www.syncfusion.com/kb/8634/how-to-handle-the-button-event-when-itemtapped-event-is-triggered-in-sflistview-for-android 

https://www.syncfusion.com/kb/9536/how-to-handle-the-tapped-event-when-child-view-is-clicked-in-android-platform 

https://www.syncfusion.com/kb/8996/how-to-resolve-itemtapped-event-not-firing-in-forms-android-when-when-mainactivity-type-is 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[asolute dev]

Dear Lakshmi Natarajan ,

Since all of the items inside my list view will have a button but share only one event which is "Button_Clicked", how do I differentiate them when the onclick event is registered for each of them? My requirement is each button has to be unique inside the list view.

Kindly provide me any advise in C# because I am using C# for this. Thank you.

Regards,

Asolute

[Lakshmi Natarajan]

Hi Asolute, 

 

Thank you for the update. 

 

We would like to inform that you can get the tapped item details from the BindingContext of the button. Based on the item data, you can do the actions in the handler. Please refer the following code snippets to get the binding context of the clicked item and sets the tapped item details to the Popup view. 

 

private void InitializePopupContent() 

{ 

    var sfListView = new SfListView() { ItemSize = 50 }; 

    var viewModel = new ContactsViewModel(); 

 

    sfListView.ItemsSource = viewModel.ContactsInfo; 

    sfListView.ItemTemplate = new DataTemplate(() => { 

        var grid = new Grid(); 

        var contactName = new Label { FontAttributes = FontAttributes.Bold, FontSize = 21 }; 

        contactName.SetBinding(Label.TextProperty, new Binding("ContactName")); 

 

        var showButton = new Button() { Text = "Show popup" }; 

        showButton.Clicked += (sender, args) => 

            { 

                var item = (sender as Button).BindingContext as Contacts; 

                popupLayout.PopupView.BindingContext = item; 

                popupLayout.Show(); 

            }; 

 

        grid.Children.Add(contactName); 

        grid.Children.Add(showButton, 1, 0); 

 

        return grid; 

    }); 

    popupLayout.Content = sfListView; 

} 

 

We have attached the modified sample and the video in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_160247-1297621567 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Demo-505336807 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[asolute dev]

Thanks Lakshmi Natarajan,

it works perfectly.

Regards,

Asolute

[Lakshmi Natarajan]

Hi Asolute, 

 

Thank you for the update. 

  

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan