Is there anyway to detect a click in the empty space if there is few or no items in the listview?
5 Answers, 1 is accepted
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
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.
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
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....
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