Telerik Radlistview Buttons don't work with swipeable content

[Robin]

Hi there,

We use a Radlistview to show a series of items with prices and a +/- to change the amount. We have made those items swipeable, so the user can easily swipe those items away to delete them. See example below (sensitive information is censored):

However, even when users do not swipe the item to the right, they can not interact with the minus button. This seems to be because the button is in the swipeable area. If we make the swipeable area smaller, some of the minus button is interactable, and if we make it larger, the plus button also stops being interactable.

Note that the minus button can't be interacted with even if the button is visible.

 

 

Is this design as intended, or is this a bug? If it is intended, what is the recommended way to allow the button to be interacted with, while also allowing the list item to be swiped?

The code used for this is:

<ContentPage
    xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
    xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
    xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
    xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit">

<telerikDataControls:RadListView
                    Grid.Row="0"
                    IsItemSwipeEnabled="True"
                    ItemTemplateSelector="{StaticResource ReceiptDataSelector}"
                    ItemsSource="{Binding Receipt.ReceiptLines}"
                    SelectedItems="{Binding SelectedReceiptLines}"
                    SelectionMode="Multiple"
                    SwipeOffset="90, 0, 0, 0"
                    SwipeThreshold="20">
                    <telerikDataControls:RadListView.SelectedItemStyle>
                        <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SelectionAccentColor}" BorderWidth="0" />
                    </telerikDataControls:RadListView.SelectedItemStyle>
                    <telerikDataControls:RadListView.ItemSwipeContentTemplate>
                        <DataTemplate x:DataType="components:IReceiptLine">
                            <Grid
                                Margin="0"
                                Padding="0"
                                ColumnSpacing="0"
                                RowSpacing="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="90" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <telerikInput:RadButton
                                    Grid.Column="0"
                                    Margin="0"
                                    BackgroundColor="Red"
                                    BorderRadius="0"
                                    Command="{Binding RemoveLineCommand, Source={RelativeSource AncestorType={x:Type local:SalePageModel}}}"
                                    CommandParameter="{Binding}"
                                    FontFamily="FontAwesomeSolid"
                                    FontSize="Medium"
                                    Text="&#xf1f8;"
                                    WidthRequest="90" />
                            </Grid>
                        </DataTemplate>
                    </telerikDataControls:RadListView.ItemSwipeContentTemplate>
                </telerikDataControls:RadListView>

code is:

 

[Didi]

Hi Robin,

Thank you for the provided image and code.

I am not sure I understand the requirement: You want to press the + and - buttons (inside the ListView template cell) when the swipe content is displayed? If this is so, I am afraid this scenario cannot be achieved. When swipe content is displayed you can interact in the content inside the swipe content, not inside the ListView item template. This is by design and this is how the native control behaves. 

You have to hide the swiping content then interact in the content inside the ListView ItemTemplate.

I hope this explanation answers your question.

Regards,
Didi
Progress Telerik

Hi Robin,

[Robin]

No, I don't think I have explained it correctly.
In the given example, I want to be able to press the minus button in the top two rows (where the swipe content is not displayed). This is not possible. Both minus buttons cannot be interacted with. They can only be interacted with if I either:

a. reduce the swipe offset.
b. place the minus button further to the left.
c. or set the IsItemSwipeEnable to false.

It is as if the swipeable area blocks the mouse button clicks on the button even if the swiping content is hidden, which seems to be a bug.

I hope I explained it more clearly now, but if you have any more questions, please let me know!

[Didi]

I can click on the button when hiding the Swipe content. I have attached the xaml definition. Please download and test on your side. I have tested on Android and UWP.

I have noticed you have an ItemTemplateSelector, but I am using an ItemTemplate. Could you please test with ItemTemplate and check whether this will solve the issue. 

[Robin]

Thanks for the reply. I have looked at the xaml file and made the single edit that causes the bug to appear. Can you try it with the attached code?

I have tested it on UWP. Both buttons cannot be pressed even if the swipe content is hidden.

 

[Didi]

I reproduced the behavior. It happens only on UWP.  I have logged this as a bug report here: https://feedback.telerik.com/xamarin/1580997-listview-uwp-the-swipe-area-blocks-the-button-in-the-cell-when-swipe-offset-is-the-same-as-content-width

I couldn't find a solution for this behavior. I can suggest refactor the UI or change the swipe offset. 

I am sorry for the inconvenience.