Swipe to delete is very hard to do when there is a frame inside datatemplate (Android)


Swipe to delete is working hard if I implement my grid as below. It is still working but i really need to pull it hard from the edge of my phone. after several tries I can achieve it but once I remove the frame, it is lighter and fluent. Do you know what might be the problem with frame? is there a working to make it working with frame?

I am testing on real android device. on emulator it has no problem as i is much easier to swipe with mouse.

 <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>

                <Frame HasShadow="True" OutlineColor="Gray"  BackgroundColor="White">
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="64"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="64"></RowDefinition>
                    </Grid.RowDefinitions>
       
                  </Grid>
                </Frame>

              </DataTemplate>
            </sfgrid:GridTemplateColumn.CellTemplate>

5 Replies

EM Emil January 5, 2017 05:49 PM UTC

It has indeed nothing to do with Frame. It is still impossible to swipe. here is my xaml and xaml.cs. I followed implementation 
 for samplebrowser app of yours and code is almost same like there but painfully hard to swipe



      <sfgrid:SfDataGrid x:Name="listItems" ScrollingMode="PixelLine" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"  
               ItemsSource="{Binding WorkoutSetWeightLogs}"
             VerticalOptions="FillAndExpand" RowHeight="100"
                  AutoGenerateColumns="False"
                  AllowSorting="False"
                     IsEnabled="True"
                  ColumnSizer="Star"
                  AllowSwiping="True"                
                  AllowDraggingRow="True"
                  AllowDraggingColumn="False"
                  SelectionMode="Single"     
                   GridTapped="dataGrid_GridTapped"
                  PropertyChanged="dataGrid_PropertyChanged"
                  SwipeEnded="dataGrid_SwipeEnded"
                 SwipeStarted="dataGrid_SwipeStarted"
        >
       <sfgrid:SfDataGrid.LeftSwipeTemplate>
                    <DataTemplate>
                        <ContentView BackgroundColor="#1AAA87" BindingContextChanged="leftTemplate_BindingContextChanged">
                            <Grid IsVisible="False" >
                                <Grid.ColumnDefinitions>
                                  <ColumnDefinition Width ="20" />
                                  <ColumnDefinition Width ="*" />
                                    <ColumnDefinition Width ="75"/>
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="1"
                                       FontSize="15"
                                       LineBreakMode="NoWrap"
                                       Text="DELETED"
                                       TextColor="White"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Center" />
                                <Label BindingContextChanged="label_BindingContextChanged"
                                       Grid.Column="2"
                                       FontSize="15"
                                       FontAttributes="Bold"
                                       HorizontalOptions="Center"
                                       LineBreakMode="NoWrap"
                                       Text="UNDO"
                                       TextColor="White"
                                       HorizontalTextAlignment="End"
                                       VerticalTextAlignment="Center" />
                            </Grid>
                        </ContentView>
                    </DataTemplate>
                </sfgrid:SfDataGrid.LeftSwipeTemplate>
                    <sfgrid:SfDataGrid.RightSwipeTemplate>
                    <DataTemplate>
                        <ContentView BackgroundColor="#1AAA87" BindingContextChanged="rightTemplate_BindingContextChanged">
                            <Grid IsVisible="False">
                                <Grid.ColumnDefinitions>
                                  <ColumnDefinition Width ="20" />
                                  <ColumnDefinition Width ="*" />
                                  <ColumnDefinition Width ="75"/>
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="1"
                                       FontSize="15"
                                       LineBreakMode="NoWrap"
                                       Text="Deleted"
                                       TextColor="White"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Center"
                                       />
                              <Label Grid.Column="2"
                                     BindingContextChanged="label_BindingContextChanged"
                                     FontSize="15"
                                     FontAttributes="Bold"
                                     HorizontalOptions="Center"
                                     LineBreakMode="NoWrap"
                                     Text="UNDO"
                                     TextColor="White"
                                     HorizontalTextAlignment="End"
                                     VerticalTextAlignment="Center" />
                            </Grid>
                        </ContentView>
                    </DataTemplate>
                </sfgrid:SfDataGrid.RightSwipeTemplate>

        <sfgrid:SfDataGrid.HeaderRowHeight>
          
          <OnPlatform Android="50"
                      WinPhone="60"
                      iOS="50"
                      x:TypeArguments="x:Double" />
        </sfgrid:SfDataGrid.HeaderRowHeight>
        <sfgrid:SfDataGrid.Columns>
          <sfgrid:GridTemplateColumn HeaderFontAttribute="Bold"
                                     HeaderText="SETS"
                                     MappingName="SetNumber">
            <sfgrid:GridTemplateColumn.HeaderCellTextSize>
              <OnIdiom Phone="12"
                       Tablet="15"
                       x:TypeArguments="x:Double" />
            </sfgrid:GridTemplateColumn.HeaderCellTextSize>
            <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>


                  <Grid BackgroundColor="White">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
    
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="64"></RowDefinition>
                    </Grid.RowDefinitions>
                                   </Grid>
          

              </DataTemplate>
            </sfgrid:GridTemplateColumn.CellTemplate>
          </sfgrid:GridTemplateColumn>
        </sfgrid:SfDataGrid.Columns>
      </sfgrid:SfDataGrid >

  private async void doDeleting(ItemsMapping deleted = null)
        {
            isSuspend = true;
            await Task.Delay(2000);
            vm = (ViewModel)this.BindingContext;

            if (leftTemplateView.Content.IsVisible)
                leftTemplateView.Content.IsVisible = false;
            else if (rightTemplateView.Content.IsVisible)
                rightTemplateView.Content.IsVisible = false;
            if (!IsUndoClicked)
            {
                vm.DeleteSet((vm.ItemsWeightLogs[swipedRowindex - 1]));
                //listItems.ItemsSource = null;
                //listItems.ItemsSource = vm.ItemsWeightLogs;
            }
            else
            {
                var removedData = vm.ItemsWeightLogs[swipedRowindex - 1];
                var isSelected = listItems.SelectedItems.Contains(removedData);
                vm.ItemsWeightLogs.Remove(removedData);
                vm.ItemsWeightLogs.Insert(swipedRowindex - 1, removedData);
                if (isSelected)
                    listItems.SelectedItems.Add(removedData);
                IsUndoClicked = false;
            }
            isSuspend = false;
        }

        private void label_BindingContextChanged(object sender, EventArgs e)
        {
            var label = sender as Label;
            if (label.GestureRecognizers.Count == 0)
            {
                label.GestureRecognizers.Add(new TapGestureRecognizer() { Command = new Command(Undo) });
            }
        }
        private void leftTemplate_BindingContextChanged(object sender, EventArgs e)
        {
            leftTemplateView = sender as ContentView;
        }
        private void rightTemplate_BindingContextChanged(object sender, EventArgs e)
        {
            rightTemplateView = sender as ContentView;
        }

        private void Undo()
        {
            IsUndoClicked = true;
        }

   private void dataGrid_SwipeStarted(object sender, SwipeStartedEventArgs e)
        {
            if (isSuspend)
                e.Cancel = true;
        }

     private void dataGrid_SwipeEnded(object sender, SwipeEndedEventArgs e)
        {
            swipedRowindex = e.RowIndex;
            if (Math.Abs(e.SwipeOffset) >= listItems.Width)
            {
                if (e.SwipeOffset > 0)
                    leftTemplateView.Content.IsVisible = true;
                else
                    rightTemplateView.Content.IsVisible = true;
                doDeleting();
            }
        }





EM Emil January 5, 2017 06:31 PM UTC

I would like to summarize problems on 2 earlier posts of me.
1) as title Frame doesnt work
2) althought i removed Frame,    <Grid BackgroundColor="White"> was the problem. removing this solved the problem without frame.

Now my question again back to the original one, why it doesnt work when I use a frame as below. thank you very much for your help

 <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>

             <Frame HasShadow="True" >
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>


AN Ashok N Syncfusion Team January 6, 2017 05:18 AM UTC

Hi Emil, 

Thanks for contacting Syncfusion support. 

You can overcome this problem by setting Grid.InputTransparent property as “true”. Please refer the below code snippet  
<Frame HasShadow="True" > 
    <Grid InputTransparent="True"> 
      <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"></ColumnDefinition> 
        <ColumnDefinition Width="*"></ColumnDefinition> 
        <ColumnDefinition Width="*"></ColumnDefinition> 

If you set the InputTransparent as true, the touch will pass to the element instead of Grid. 

Regards, 
Ashok 



EM Emil January 6, 2017 12:34 PM UTC

Thanks for your reply. this work when I dont use any frame as below, swiping is really smooth 

    <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>
         
                  <Grid InputTransparent="True" >
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>

but once I add frame around Grid as below, swiping is not working smoothly on Android on a real device. I am using sony xperia z3 but I think that it should be problem for any device. Something just getting throttled with Frame swipping 

   </sfgrid:GridTemplateColumn.HeaderCellTextSize>
            <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>

                <Frame HasShadow="True" >
                  <Grid InputTransparent="True"  >
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>
                      <ColumnDefinition Width="*"></ColumnDefinition>


AN Ashok N Syncfusion Team January 9, 2017 11:41 AM UTC

Hi Emil, 

Thanks for your update. We have created a support incident under your account for the same query. So kindly request you to follow up that incident for further updates.

Regards, 
Ashok 


Loader.
Up arrow icon