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
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfListView with SfButtons as item template fails to fire clicked event

SfListView with SfButtons as item template fails to fire clicked event

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>

7 Replies
DB Dinesh Babu Yadav Syncfusion Team July 30, 2019 11:16 AM UTC

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


LK Liam Keogh replied to Dinesh Babu Yadav August 2, 2019 11:53 AM UTC

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


Regards,
Liam

SR Sivakumar R Syncfusion Team August 2, 2019 07:19 PM UTC

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, 
 
<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 


LK Liam Keogh replied to Sivakumar R August 5, 2019 01:02 PM UTC

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, 
 
<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?

SR Sivakumar R Syncfusion Team August 6, 2019 09:42 AM UTC

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 


LK Liam Keogh August 6, 2019 09:45 AM UTC

Much appreciated.

GP Gnana Priya Namasivayam Syncfusion Team August 7, 2019 06:01 AM UTC

Hi Liam, 

Thanks for the update.  

Regards, 
Gnana Priya N  


Loader.
Up arrow icon