itemTap event when swipe actions are visible

Thread is closed for posting
2 posts, 0 answers
  1. Douglas
    Douglas avatar
    16 posts
    Member since:
    Apr 2017

    Posted 30 Apr 2017 Link to this post

    I want user interaction similar to the iOS email listview.  You can tap an item if the swipe actions are NOT visible.  But, if you tap when they are visible the actions collapse.

    I have the swipe actions working properly.  When you tap an item, it collapses the actions.  But, it also sends an itemTap event.  

    I'm trying to find a way to detect if the actions are visible to ignore the tap in the event.  I am having no luck and need some guidance.

    --thanks

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 01 May 2017 Link to this post

    Hi Douglas,

    As far as I understood you have implemented swipe actions for your list view and you want to have logic where if the swipe actions are triggered then the itemTap should not execute any logic. And if there are no active swipe actions then the itemTap should execute its logic.

    Based that I got your issue correctly and that you are using RadListView, here is a possible solution using an observable model and a boolean property as a "marker".

    Let's assume that we have this example as a code base (and its respective XML file).
    The example shows the basic usage of swipe actions so we are also going to introduce a basic itemTap logic for our purposes.

    swipe-actions.xml
    (adding itemTap
    and reusing itemSwipteProgressSrarted / itemSwipteProgressEnded)
    <lv:RadListView
                id="listView"
                items="{{ dataItems }}"
                row="1"
                selectionBehavior="None"
    itemTap="onItemTap"
                itemSwipeProgressEnded="onSwipeCellFinished"
                itemSwipeProgressStarted="onSwipeCellStarted"
                itemSwipeProgressChanged="onCellSwiping"
                swipeActions="true">

    Then in our code behind file swipe-actions.ts  we are creating an observable boolean property 
    var vm = new viewModel.ViewModel();
     
    // IMPORTANT!!! go to "./swipe-actions-model" and make it extends Observable to set observable properties
    vm.set("areSwipeActionsOn", false);

    and in the same file also introducing the itemTap as follows:
    export function onItemTap(args: listViewModule.ListViewEventData) {
        if(vm.get("areSwipeActionsOn")) {
            console.log("Swipe actions visible! Do nothing...");
        } else {
            console.log("onItemTap");
            // implement the logic for itemTap here
        }
    }

    Lastly, we need to set the "marker" to true when a swipe action is ON and then back to false when it is finished.For this, we are using itemSwipeProgressStarted and itemSwipteProgressEnded events.
    export function onSwipeCellStarted(args: listViewModule.ListViewEventData) {
        console.log("onSwipeCellStartedd");
     
        vm.set("areSwipeActionsOn", true);
     
        var swipeLimits = args.data.swipeLimits;
        var swipeView = args['object'];
        var leftItem = swipeView.getViewById('mark-view');
        var rightItem = swipeView.getViewById('delete-view');
        swipeLimits.left = leftItem.getMeasuredWidth();
        swipeLimits.right = rightItem.getMeasuredWidth();
        swipeLimits.threshold = leftItem.getMeasuredWidth() / 2;
    }
     
    export function onSwipeCellFinished(args: listViewModule.ListViewEventData) {
        console.log("onSwipeCellFinished");
     
        vm.set("areSwipeActionsOn", false);
    }

    Now our code will execute itemTap logic only when the boolean marker is false, otherwise, it will simply go in the if condition.

    All of the above is based on the assumption that you are using swipe actions for RadListView, but please do let me know if that scenario is different or not applicable to your case and you need further assistance.
     
    Regards,
    Nikolay Iliev
    Telerik by Progress
    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