Detect Click/Tap in Empty Area

[Nathanael]

Since there is no source to the actual underlying control, I can't really look myself...
Is there anyway to detect a click in the empty space if there is few or no items in the listview?   

[Nikolay Tsonev]

Hello,

Thank you for contacting us,

I reviewed your scenario and found solution. For  you could add two tap gestures one for the main Layout and another for inner ListView, In this you will know, which layout  have been taped. For I was unable to find way to do that, because when you set tap event to the ListView and its parent Layout and tap on some of the ListView items, both events will be fired the same time. some possible workaround is to set global value, which could help you to when the ListView have been taped in iOS.
In regard to you could review my sample project, where you could review my suggestion.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout backgroundColor="green" id="stack">
    <ListView  id="lv" backgroundColor="red" items="{{ source }}">
        <ListView.itemTemplate>
            <Label text="{{title}}" textWrap="true" />

        </ListView.itemTemplate>
    </ListView>

  </StackLayout>
</Page>

main-page.ts

import { EventData } from "data/observable";
import { Page } from "ui/page";
import {ObservableArray} from "data/observable-array";
import {isAndroid, isIOS} from "platform";
import {ListView} from "ui/list-view";
import {GestureTypes, GestureEventData} from "ui/gestures";
import {StackLayout} from "ui/layouts/stack-layout"

var status = "";
export function navigatingTo(args: EventData) {
    var page = <Page>args.object;
    var listview:ListView  =<ListView>page.getViewById("lv");
    var stacklayout:StackLayout =<StackLayout>page.getViewById("stack");
    var textfield = page.getViewById("etxtf");
    var newArray= new ObservableArray();
    for(var i=0; i<4; i++){
        newArray.push({"title":"Title "+i});
    }

    if(isAndroid){
        stacklayout.on("tap", function(args){
            console.log("empty space tap");
        });

        listview.on("tap", function(args){
            console.log("listview tap");
        });
    }
    if(isIOS){
        stacklayout.on(GestureTypes.tap, function(args:GestureEventData){
            console.log(args.view);
            if(status == "inListView"){
                console.log("in the ListView");
                status="";
            }
            else{
                console.log("empty space")
            }

        });
        listview.on("tap", function(args:any){
            status="inListView"
        });
    }
    page.bindingContext = {source : newArray};
}

I hope this is applicable you.

Regards,
nikolay.tsonev
Telerik by Progress

[Nathanael]

Sorry, I guess I should have put "RadListView" I assumed it was what everyone would be talking about in the UI of NS/ListView group.  ;-)

 

If you have:

<Page xmlns:lv="nativescript-telerik-ui/listview"  tap="stackClick">
<StackLayout id="mainPanel" tap="stackClick">

    <lv:RadListView id="lines" itemSwipe="true" class="rlv" tap="stackClick"
                    itemTap="groupClick"
                    itemSwipeProgressStarted="itemSwipeProgressStarted"
                    itemSwipeProgressEnded="itemSwipeProgressEnded">
    <lv:RadListView.listViewLayout>
      <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="1"/>
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
<!-- Normal Layout -->
    </lv:RadListView.itemTemplate>
        <lv:RadListView.itemSwipeTemplate>
<!--- Swipe Layout -->
</lv:RadListView.itemSwipeTemplate>
    </lv:RadListView>
  </StackLayout>
  </Page>

 

I'm currently testing on Android...

The code for "stackClick" is a simple exports.stackClick = function() { console.log("I'm clicked");  }

So in this specific instance the Radlistview takes up the entire screen, tapping anywhere on the screen does NOT give me a "I'm clicked" output, even though it has been assigned at all three layers of the app; the RadListView seems to eat the tap even in its empty area.

[Deyan]

Hello Nathanael,

This seems to be the expected behavior as the native RecyclerView (which RadListView utilizes for Android) always handles the touch event and never lets it bubble up to the parent element. Can you please provide some more details what your scenario is so that we can think of a way of helping you?

Thanks!

Regards,
Deyan
Telerik by Progress

[Nathanael]

It might be "expected" default; behavior; but if I can get access to the underlying native control -- then things like http://stackoverflow.com/questions/27703779/detect-click-on-recyclerview-outside-of-items

can come into play  (or you can even add this functionality built into the RLV).  ;-)

I basically need to detect if I'm clicking outside of a valid item so if the list view is only say two entries; I want to detect clicks in the empty area to run some additional functionality....

[Deyan]

Hello Nathanael,

Thanks for writing back.

Here's a simple snippet (sourced from the StackOverflow discussion you have mentioned) that implements the behavior:

export function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new viewModel.ViewModel();
    if (applicationModule.android) {
        var radListView = page.getViewById("radListView");
        var nativeView = radListView.android.getChildAt(0);
        console.log("ListView: " + radListView.android.getChildAt(0));


        nativeView.setOnTouchListener(new android.view.View.OnTouchListener({
            onTouch: function (v, event) {
                if (event.getAction() == android.view.MotionEvent.ACTION_DOWN
                    && nativeView.findChildViewUnder(event.getX(), event.getY()) == null) {
                        console.log("TOUCH OUTSIDE ITEMS");
                    return true;
                }
                return false;
            }

        }));
    }
}

I have tested it on my side and it works as expected.

Let me know in case you have any further questions.

Regards,
Deyan
Telerik by Progress