Hello,
I try to implement the selection / deselection behaviour for our app and I have some trouble to make it working on iOS.
In itemSelected event, I try to add a CSS class to the view, that marks the list item being selected. In itemDeselected, I want to remove the css class from the view, so the item should look default (not selected).
So I have this itemTemplate:
<
lv:RadListView.itemTemplate
>
<
StackLayout
className
=
"listitem-outer"
>
<
StackLayout
className
=
"listitem"
>
<
Label
text
=
"{{ title }}"
textWrap
=
"true"
/>
<
Label
text
=
"{{ description }}"
textWrap
=
"true"
/>
<
Label
text
=
"{{ creationDate }}"
textWrap
=
"true"
/>
</
StackLayout
>
</
StackLayout
>
</
lv:RadListView.itemTemplate
>
This is what I am doing in the code behind:
exports.onItemSelected =
function
(args) {
console.log(args.view);
try
{
args.view.getChildAt(0).className =
"listitem listitem-selected"
;
}
catch
(e) {
console.log(e);
}
};
exports.onItemDeselected =
function
(args) {
console.log(args.view);
/*returns undefined on iOS*/
try
{
args.view.getChildAt(0).className =
"listitem"
;
}
catch
(e) {
console.log(e);
}
};
The scenario works perfectly on Android devices and the selection works for iOS as well, but I am not able to unselect an item on iOS. I tried to log the view in the console and I noticed that it logs the outer StackLayout twice, when I select one item and unselect it on Android. On iOS, args.view is undefined on itemDeselected event.
My test environment:
- NativeScriptCLI 3.3 and tns-core-modules 3.3.0
- NativeScript Pro UI 3.2.0
- iPhone 6 with iOS 10.3
Firstly, I am not sure if this is the right way to add and remove CSS classes at runtime (at least it works on Android). And secondly, I don't know if this is the correct behaviour on iOS or maybe it is a bug in the iOS RadListView definition?
Please let me know, if you are able to reproduce this issue. I added a gif demonstrating the wanted behaviour that is working on Android and a sample project.
Best regards and thank you in advance