Swipe Animation Bug

[Ericky]

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>

[Ericky]

Nevermind on this, I realized that behavior was due to the list objects having the same id.

[Nikolay Tsonev]

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