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

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