Nativescript-ui-feedback: RadListView swipe action crush with multiple templates

[tigrenok00]

Hi,

I'm using a listview with 2 item templates, and one swipe actions template.
The problem is, that one of the templates handles the swipe actions fine, but the other one crushes with the following error immediately on swipe beginning:

These are the versions I'm using:
Android
Progress NativeScript UI version: 3.0.2
CLI: 3.1.1
Cross-platform modules: 3.1.0
Runtime(s): 3.1.1

And here are the code snippets:

<RadListView #orderLinesView [items]="orderLines" [itemTemplateSelector]="selectItemTemplateList" class="list-group" selectionBehavior="Press"
        multipleSelection="false" (itemSelected)="onItemSelected($event)" swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)"
        (itemSwipeProgressChanged)="onCellSwiping($event)">

        <ng-template tkTemplateKey="free_text" let-item="item">
            <StackLayout>
                 <!-- template here -->
            </StackLayout>
        </ng-template>

        <ng-template tkTemplateKey="catalog" let-item="item">
            <StackLayout>
                <!-- template here -->
            </StackLayout>
        </ng-template>

<GridLayout *tkListItemSwipeTemplate columns="auto, *, auto">
            <GridLayout columns="*" col="0" id="left-stack">
                <GridLayout col="0" class="deleteGridLayout" (tap)="removeItem($event)" id="btnDelete">
                    <Label [text]="'fa-trash' | fonticon" class="fa swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
                </GridLayout>
            </GridLayout>
            <GridLayout columns="*,*" col="2" id="right-stack">
                <GridLayout col="0" class="plusGridLayout" (tap)="addQty($event)" id="btnMark">
                    <Label [text]="'fa-plus-circle' | fonticon" class="fa swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
                </GridLayout>
                <GridLayout col="1" class="minusGridLayout" (tap)="reduceQty($event)" id="btnArchive">
                    <Label [text]="'fa-minus-circle' | fonticon" class="fa swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
                </GridLayout>
            </GridLayout>
        </GridLayout>

    </RadListView>

   public onSwipeCellStarted(args: ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        swipeLimits.threshold = args['mainView'].getMeasuredWidth() * 0.2; // 20% of whole width
        swipeLimits.left = args['mainView'].getMeasuredWidth() * 0.2;// 65% of whole width
        swipeLimits.right = args['mainView'].getMeasuredWidth() * 0.4; // 65% of whole width
    }

    public onCellSwiping(args: ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        var swipeView = args['swipeView'];
        this.mainView = args['mainView'];
        this.leftItem = swipeView.getViewById('left-stack');
        this.rightItem = swipeView.getViewById('right-stack');

        if (args.data.x > 0) {
            var leftDimensions = View.measureChild(
                <View>this.leftItem.parent,
                this.leftItem,
                layout.makeMeasureSpec(Math.abs(args.data.x), layout.EXACTLY),
                layout.makeMeasureSpec(this.mainView.getMeasuredHeight(), layout.EXACTLY));
            View.layoutChild(<View>this.leftItem.parent, this.leftItem, 0, 0, leftDimensions.measuredWidth, leftDimensions.measuredHeight);
            this.hideOtherSwipeTemplateView("left");
        } else {
            var rightDimensions = View.measureChild(
                <View>this.rightItem.parent,
                this.rightItem,
                layout.makeMeasureSpec(Math.abs(args.data.x), layout.EXACTLY),
                layout.makeMeasureSpec(this.mainView.getMeasuredHeight(), layout.EXACTLY));

            View.layoutChild(<View>this.rightItem.parent, this.rightItem, this.mainView.getMeasuredWidth() - rightDimensions.measuredWidth, 0, this.mainView.getMeasuredWidth(), rightDimensions.measuredHeight);
            this.hideOtherSwipeTemplateView("right");
        }
    }

    private hideOtherSwipeTemplateView(currentSwipeView: string) {
        switch (currentSwipeView) {
            case "left":
                if (this.rightItem.getActualSize().width != 0) {
                    View.layoutChild(<View>this.rightItem.parent, this.rightItem, this.mainView.getMeasuredWidth(), 0, this.mainView.getMeasuredWidth(), 0);
                }
                break;
            case "right":
                if (this.leftItem.getActualSize().width != 0) {
                    View.layoutChild(<View>this.leftItem.parent, this.leftItem, 0, 0, 0, 0);
                }
                break;
            default:
                break;
        }
    }

[VladimirAmiorkov]

Hi @tigrenok00 ,

Thank you for reporting this to us, I can confirm that this is an issue in the current version 3.0.2 of the plugin. Using "multiple templates" and "swipe actions" at the same time is causing errors on Android and/or not being able to trigger itemSwipeProgressStarted.

We apologize for the inconvenience and we will do our best to resolve it as soon as possible

[ginev]

@tigrenok00 this issue has been addressed in our internal codebase. It will soon be available via the nativescript-telerik-ui@next and nativescript-telerik-ui-pro@next tags from npmjs.com

[tigrenok00]

Thank you, I'm on the @next version and it works.

[tigrenok00]

Hi, any news on the date of the final release of the build which fixes this?

[ginev]

@tigrenok00 - we plan to upload the bits by the end of August.

[tigrenok00]

I'm having trouble with the alpha builds for some reason... In one of the projects I am on 3.1.0-2017-7-31-6 since this topic was opened, and it is fine. But yesterday I had to install it in another project, and there both current @next version but also the 3.1.0-2017-7-31-6 give me this crush wherever I'm using RadListView (there was no issue with last stable version):

Does this tell you anything?

[tigrenok00]

Pheew, I've found the dependecy, it needed nativescript-angular 3.1.2. Never mind!

[VladimirAmiorkov]

Hi @tigrenok00 ,

When using the next version of the nativescript-telerik-ui-pro plugin note that it has dependencies to both tns-core-modules="next" and nativescript-angular="next". This is because the "next" version is the version that is currently in development during both the other dependencies are also in development stage.

PS: Is this issue still open ?