Swipe functionality not working RadListView

[Nik]

I have added swipe in RadListView, but the swipe functionality is not working, it is swiping only when swiped from left or right edges.

Following is the code I have used

<telerikDataControls:RadListView
                                 IsItemSwipeEnabled="True"
                                 ItemsSource="{Binding FinalDisplayCallSheets}"
                                 SelectionMode="None"
                                 SwipeOffset="0, 0, 70, 0"
                                 SwipeThreshold="10">
<telerikDataControls:RadListView.HeaderTemplate>
<DataTemplate>
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.8*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Frame HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<Label Text="Task" TextColor="{StaticResource DarkBlueColor}"  Margin="8" VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</Frame>
<Frame HasShadow="False" Grid.Column="1" Padding="0" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<Label Text="Supplier" TextColor="{StaticResource DarkBlueColor}"  Margin="8" VerticalOptions="Center" FontSize="14" FontAttributes="Bold"/>
</Frame>
<Frame HasShadow="False" Grid.Column="2" Padding="8" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<StackLayout>
<Label Text="Call" TextColor="{StaticResource DarkBlueColor}"  VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
<Label Text="Plan" TextColor="{StaticResource DarkBlueColor}"   VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame HasShadow="False" Grid.Column="3" Padding="8" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<StackLayout>
<Label Text="Start" TextColor="{StaticResource DarkBlueColor}"  VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
<Label Text="Cmp" TextColor="{StaticResource DarkBlueColor}"  VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame HasShadow="False" Grid.Column="4" Padding="8" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<StackLayout>
<Label Text="Est" TextColor="{StaticResource DarkBlueColor}"   VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
<Label Text="Base" TextColor="{StaticResource DarkBlueColor}"   VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame HasShadow="False" Grid.Column="5" Padding="0" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<Label Text="Notes" TextColor="{StaticResource DarkBlueColor}"  Margin="8" VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</Frame>
<Frame HasShadow="False" Grid.Column="6" Padding="0" CornerRadius="0" BackgroundColor="{StaticResource GridBackgroundColor}" BorderColor="{StaticResource GridBorderColor}">
<Label Text="Status" TextColor="{StaticResource DarkBlueColor}"  Margin="8" VerticalOptions="Center" FontSize="14" FontAttributes="Bold" />
</Frame>
</Grid>
</DataTemplate>
</telerikDataControls:RadListView.HeaderTemplate>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.8*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Frame HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<StackLayout Orientation="Horizontal">
<BoxView VerticalOptions="Fill" HorizontalOptions="Fill" WidthRequest="10" 
Color="{Binding LinkedColor}" Margin="0,0,0,0"/>
<Label Text="{Binding sgItemName}" TextColor="{Binding TaskTextColor}" LineBreakMode="WordWrap" Padding="8" VerticalOptions="Center"
   FontAttributes="Bold"/>
</StackLayout>
</Frame>
<Frame Grid.Column="1" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<Label Text="{Binding SupplierName}" TextColor="#878388" LineBreakMode="WordWrap" Padding="8" VerticalOptions="Center" />
</Frame>
<Frame Grid.Column="2" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<Grid Padding="8" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="{Binding DateCalled}" Grid.Row="0" TextColor="{StaticResource PinkColor}"  />
<Label Text="{Binding DatePlanned}"  Grid.Row="1" TextColor="#4899cf"/>
</Grid>
</Frame>
<Frame Grid.Column="3" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<Grid Padding="8" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="{Binding DateStart}" TextColor="#4899cf"  />
<Label Text="{Binding DateCompleted}"  Grid.Row="1" TextColor="#56b883"/>
</Grid>
</Frame>
<Frame Grid.Column="4" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<Grid Padding="8" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="{Binding DateEstimatedStart}" Grid.Row="0" TextColor="{StaticResource PinkColor}"  />
<Label Text="{Binding DateBaselineCompletion}"  Grid.Row="1" TextColor="#4899cf"/>
</Grid>
</Frame>
<Frame Grid.Column="5" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White" BorderColor="{StaticResource GridBorderColor}">
<Grid VerticalOptions="Center" Padding="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" HorizontalOptions="Center" HeightRequest="24" WidthRequest="24" Source="Images/Document_Gray.png"/>
<Image Grid.Column="1" HorizontalOptions="Center" HeightRequest="24" WidthRequest="24" Source="Images/Truck_Gray.png"/>
<Image Grid.Column="2" HorizontalOptions="Center" HeightRequest="24" WidthRequest="24" Source="Images/Url.png"/>
<Image Grid.Column="3" HorizontalOptions="Center" HeightRequest="24" WidthRequest="24" Source="Images/Image_Gray.png"/>
</Grid>
</Frame>
<Frame Grid.Column="6" HasShadow="False" Padding="0" CornerRadius="0" BackgroundColor="White"
   BorderColor="{StaticResource GridBorderColor}">
<Image HorizontalOptions="Center" HeightRequest="30" WidthRequest="30"
                                               Source="{Binding Path=DataRow[StatIcon], 
                                                Converter={StaticResource csImageConv}}">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.TaskScheduleCommand, Source={x:Reference callSheet}}"
  CommandParameter="{Binding}"/>
</Image.GestureRecognizers>
</Image>
</Frame>
</Grid>

</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>

</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
<telerikDataControls:RadListView.ItemSwipeContentTemplate>
<DataTemplate>
<Grid Margin="0" Padding="0" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Label Grid.Column="1"  BackgroundColor="Red" HorizontalTextAlignment="Center" Text="delete" TextColor="White"
                       VerticalTextAlignment="Center"
                       WidthRequest="70" />
</Grid>
</DataTemplate>
</telerikDataControls:RadListView.ItemSwipeContentTemplate>
</telerikDataControls:RadListView>

[Yana]

Hi Nikhil,

I've just tested the provided snippet with some sample data and the swipe functionality works properly on my side.  Please keep in mind that currently through the set SwipeOffset property as well as the way the content inside SwipeContentTemplate the swipe is only from the right edge.

In case you'd prefer the swipe from both left and right edges SwipeOffset should be set like this "SwipeOffset="70, 0, 70, 0" and the content should be in 3 columns, please take a look at the following example in our documentation:

ListView: Example with swipe events

If you still experience the issue, please send us more details on what version of Telerik UI for Xamarin you're using and whether the problem is observed on specific platform.

Regards,
Yana
Progress Telerik

[Nik]

Hi yana,

Thanks for the reply, earlier I was testing in UWP where swipe was working only when swiped from the edges, now I tested in iOS simulator it is working perfectly.

can you please let me know what can be the issue in UWP.

[Yana]

Hi Nikhil,

I've just tested the scenario on UWP and it works ok, you can just increase the SwipeThreshold property for example to "50":

  <telerikDataControls:RadListView
                                 IsItemSwipeEnabled="True"
                                 ItemsSource="{Binding FinalDisplayCallSheets}"
                                 SelectionMode="None"
                                 SwipeOffset="0, 0, 70, 0"
                                 SwipeThreshold="50">

To make the swipe smoother on UWP. 

Please give it a try and let me know how it goes.