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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

128159 Jan 5,2017 11:47 AM Jan 9,2017 06:41 AM Xamarin.Forms 5
loading
Tags: SfDataGrid
Emil
Asked On January 5, 2017 11:47 AM


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>

Emil
Replied On January 5, 2017 12:49 PM

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();
            }
        }




Emil
Replied On January 5, 2017 01:31 PM

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>

Ashok N [Syncfusion]
Replied On January 6, 2017 12:18 AM

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 


Emil
Replied On January 6, 2017 07:34 AM

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>

Ashok N [Syncfusion]
Replied On January 9, 2017 06:41 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;