This is a migrated thread and some comments may be shown as answers.

Swipe Animation Bug

2 Answers 62 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ericky
Top achievements
Rank 1
Ericky asked on 05 Jun 2017, 04:08 PM

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 Answers, 1 is accepted

Sort by
0
Ericky
Top achievements
Rank 1
answered on 05 Jun 2017, 05:44 PM
Nevermind on this, I realized that behavior was due to the list objects having the same id.
0
Nikolay Tsonev
Telerik team
answered on 06 Jun 2017, 05:24 AM
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.
Tags
ListView
Asked by
Ericky
Top achievements
Rank 1
Answers by
Ericky
Top achievements
Rank 1
Nikolay Tsonev
Telerik team
Share this question
or