Swipe Animation Bug

Thread is closed for posting
3 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 05 Jun 2017 Link to this post

    I am trying to make a swipe action button, but for some reason, only the first cell is updated no matter which cell I swipe.

    Video Example

    onSwipeCellStarted(args: ListViewEventData) {
      const swipeLimits = args.data.swipeLimits;
      const mainView = args['mainView'];
     
      swipeLimits.left = mainView.getMeasuredWidth() * 0.25;
      swipeLimits.right = 1;
      swipeLimits.threshold = mainView.getMeasuredWidth() * 0.12;
    }
     
    onCellSwiping(args: ListViewEventData) {
      const mainView = args['mainView'];
      const rightItem = args['swipeView'].getViewById('delete-view');
      const swipeView = args['swipeView'];
     
      if (args.data.x <= 0) {
        const verticalMargin = (mainView.marginTop + mainView.marginBottom) * 2 + 13;
        const horizontalMargin = (mainView.marginLeft + mainView.marginRight) * 2 + 10;
         
        const rightDimensions = View.measureChild(
          <View>mainView,
          rightItem,
          layout.makeMeasureSpec(Math.abs(args.data.x), layout.EXACTLY),
          layout.makeMeasureSpec(mainView.getMeasuredHeight(), layout.EXACTLY));
     
        View.layoutChild(<View>mainView, rightItem,
          mainView.getMeasuredWidth() - rightDimensions.measuredWidth + horizontalMargin - 15,
          verticalMargin,
          mainView.getMeasuredWidth() + horizontalMargin,
          rightDimensions.measuredHeight + verticalMargin
        );
      }
    }

     

    <GridLayout rows="*">
      <RadListView [items]="conversations" rows="0" (itemLoading)="onItemLoading($event)"
        selectionBehavior="None" swipeActions="true" (itemSwipeProgressChanged)="onCellSwiping($event)"
        (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
        <ng-template tkListItemTemplate let-item="item" let-index="index">
          <StackLayout class="conversation" (tap)="subRoute(index)">
            <DockLayout orientation="horizontal">
              <Label dock="right" [text]="item.dateString" verticalAlignment="center"></Label>
              <Label dock="left" class="title" [text]="item.otherUser.name" verticalAlignment="center"></Label>
            </DockLayout>
            <TextView *ngIf="item.message" class="last-message" [minLines]="5" [editable]="false"       [(ngModel)]="item.message"></TextView>
          </StackLayout>
        </ng-template>
     
        <GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="gridLayoutLayout">
          <StackLayout id="delete-view" class="delete-button" col="2" (tap)="delete($event)">
            <Label class="btn icon" [text]="'\ue81c'" verticalAlignment="center" horizontalAlignment="center"></Label>
          </StackLayout>
        </GridLayout>
      </RadListView>
    </GridLayout>
  2. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 05 Jun 2017 Link to this post

    Nevermind on this, I realized that behavior was due to the list objects having the same id.
  3. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 06 Jun 2017 Link to this post

    Hello,
    Thank you for contacting us.

    If I understand you correctly you were able to resolve your case.
    Regarding the topic, indeed the id should be unique for every element inside the ListView. Otherwise only the first element will be taken.

    Let me know if I could assist you further. 
    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top