SfListView with SfButtons as item template fails to fire clicked event

[Liam Keogh]

In my project I am making use of a SfListView and I am populating that with numerous elements that have a data template associated to them of type SfButton. The issue I face is that on Android only, tapping on the buttons does not fire the bound command. It seems to be an intermittent issue where sometimes it will work without issue, other times some of the elements will fire the command, other times nothing will happen at all.

It is worth noting that this issue is not present on UWP, all works as intended on that. Also, if I change the data template to be something else, such as a Xamarin Forms label then everything works as expected on all platforms. An example of the problematic xaml is linked below. 

<sfList:SfListView

     SelectionModel="Single"

     ItemsSource="{Binding ListOfNames"}

     <sfList:SfListView.ItemTemplate>

          <DataTemplate>

               <sfButton:SfButton

                    Text="{Binding Name}"

                    Command="{Binding SampleCommand"}/>

          </DataTemplate>

     </sfList:SfListView.ItemTemplate>

</sfList:SfListView>

[Dinesh Babu Yadav]

Hi Liam, 

 

Thank you for contacting Syncfusion support. 

 

Based on the given details, we have checked the reported issue with SfListView and SfButton controls in v17.2.0.36. And the button command is triggered as expected in Android and UWP platform. We suspect that the issue may occur at sample level. So, we request you to please check with the following sample. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146267/ze/CustomGrouping-1028399527  

 

If you are still facing the issue, we request you to please modify the above sample to replicate the issue and revert us the replication procedure which would highly help us to analyze the issue better and update you an appropriate solution. 

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Liam Keogh]

Hi Liam, 

 

Thank you for contacting Syncfusion support. 

 

Based on the given details, we have checked the reported issue with SfListView and SfButton controls in v17.2.0.36. And the button command is triggered as expected in Android and UWP platform. We suspect that the issue may occur at sample level. So, we request you to please check with the following sample. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146267/ze/CustomGrouping-1028399527  

 

If you are still facing the issue, we request you to please modify the above sample to replicate the issue and revert us the replication procedure which would highly help us to analyze the issue better and update you an appropriate solution. 

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

I have managed to put together a sample project that will replicate the issue I am facing. As you will be able to see, with the item template of the list view set to be syncfusion buttons then the bound command will not fire. However, if you replace the item template to make use of the labels that I have commented out directly below in the same file, then you will be able to see that the command fires correctly at that point.

Sample: https://github.com/p4dev/SyncfusionListSample

Regards,

Liam

[Sivakumar R]

Hi Liam, 

 

In android, Button will not pass touch to its parent ListView. So, the Command associated with ItemTapped event of ListView will not work when you tap over Button. But, when you load a label, then label won’t handle touch and it will pass the touch to parent. So, its working as expected. 

 

This is expected behavior. Requesting to bind the command directly to Button as on the below code snippet. Please refer below reports, 

https://github.com/xamarin/Xamarin.Forms/issues/5187  

https://github.com/xamarin/Xamarin.Forms/issues/6402 

 

<sfList:SfListView 

    HorizontalOptions="Center" 

    VerticalOptions="Center" 

    SelectionMode="Single"  

    x:Name="listview" 

    ItemsSource="{Binding Fruits}" 

    SelectionBackgroundColor="Transparent" 

    FocusBorderColor="Black"> 

    <sfList:SfListView.Behaviors> 

        <behaviors:EventToCommandBehavior 

                    EventName="ItemTapped" 

                    Command="{Binding ShowFruitPriceCommand}" 

                    EventArgsParameterPath="ItemData" /> 

    </sfList:SfListView.Behaviors> 

    <sfList:SfListView.ItemTemplate> 

        <DataTemplate> 

            <buttons:SfButton 

        HorizontalOptions="Center" 

        BackgroundColor="ForestGreen" 

        CommandParameter="{Binding}" 

        Command="{Binding BindingContext.ShowFruitPriceCommand, Source={x:Reference listview}}" 

        TextColor="WhiteSmoke" 

        Text="{Binding Name}"/> 

        </DataTemplate> 

    </sfList:SfListView.ItemTemplate> 

    <sfList:SfListView.SelectedItemTemplate> 

        <DataTemplate> 

            <buttons:SfButton 

        HorizontalOptions="Center" 

        BackgroundColor="SlateGray" 

        TextColor="WhiteSmoke" 

        Text="{Binding Name}"/> 

        </DataTemplate> 

    </sfList:SfListView.SelectedItemTemplate> 

</sfList:SfListView> 

 

 

Thanks, 

Sivakumar 

[Liam Keogh]

Hi Liam, 

 

In android, Button will not pass touch to its parent ListView. So, the Command associated with ItemTapped event of ListView will not work when you tap over Button. But, when you load a label, then label won’t handle touch and it will pass the touch to parent. So, its working as expected. 

 

This is expected behavior. Requesting to bind the command directly to Button as on the below code snippet. Please refer below reports, 

https://github.com/xamarin/Xamarin.Forms/issues/5187  

https://github.com/xamarin/Xamarin.Forms/issues/6402 

 

<sfList:SfListView 

    HorizontalOptions="Center" 

    VerticalOptions="Center" 

    SelectionMode="Single"  

    x:Name="listview" 

    ItemsSource="{Binding Fruits}" 

    SelectionBackgroundColor="Transparent" 

    FocusBorderColor="Black"> 

    <sfList:SfListView.Behaviors> 

        <behaviors:EventToCommandBehavior 

                    EventName="ItemTapped" 

                    Command="{Binding ShowFruitPriceCommand}" 

                    EventArgsParameterPath="ItemData" /> 

    </sfList:SfListView.Behaviors> 

    <sfList:SfListView.ItemTemplate> 

        <DataTemplate> 

            <buttons:SfButton 

        HorizontalOptions="Center" 

        BackgroundColor="ForestGreen" 

        CommandParameter="{Binding}" 

        Command="{Binding BindingContext.ShowFruitPriceCommand, Source={x:Reference listview}}" 

        TextColor="WhiteSmoke" 

        Text="{Binding Name}"/> 

        </DataTemplate> 

    </sfList:SfListView.ItemTemplate> 

    <sfList:SfListView.SelectedItemTemplate> 

        <DataTemplate> 

            <buttons:SfButton 

        HorizontalOptions="Center" 

        BackgroundColor="SlateGray" 

        TextColor="WhiteSmoke" 

        Text="{Binding Name}"/> 

        </DataTemplate> 

    </sfList:SfListView.SelectedItemTemplate> 

</sfList:SfListView> 

 

 

Thanks, 

Sivakumar 

Sivakumar,

Are you saying that because both the ListView and Button have access to a touched/clicked event that when the Button is part of a ListView that it will not send that event to the parent? But because a label does not have that conflicting event that it will successfully pass it to the parent ListView? 

So the Button will only pass it's touched event to the parent ListView if the button is bound to the command and makes a reference to the parent ListView as the CommandParameter.

Is all of this correct?

[Sivakumar R]

Hi Liam, 

 

No, Button doesn’t pass touch to parent. So, I have provided solution to handle Button Tapped command instead of using ListView.ItemTapped to achieve your requirement.  

 

Thanks, 

Sivakumar 

[Liam Keogh]

Much appreciated.

[Gnana Priya Namasivayam]

Hi Liam, 

Thanks for the update.  

Regards, 

Gnana Priya N