[Solved] itemDeselected: args.view is undefined (iOS only)

[Marc]

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

 

 

[Nick Iliev]

Hello Marc,

I can confirm that indeed this is unexpected behavior on iOS and I have logged this one like a bug in this issue.
You can keep track on the issue for updated information regarding workarounds and possible patch updates.

meanwhile, as a workaround for this case, you can use the workflow in this example.
For your convenience, in the lines below I am going to explain the solution step by step.

- In the linked sample is that our view model item has a custom property called selected.
- Using the boolean property, we are setting it to true on itemSelected event and to false on itemDeselected event
- Lastly, we are using this boolean property with ternary expression to apply different styling (for example changing the backgroundColor property in this case).

Using this approach you can dynamically change the wanted properties while binding them to the boolean value of selected and using a ternary expression.
I hope this solution will be applicable to your project - do let me know if you need further assistance on that matter.

Regards,
Nikolay Iliev
Progress Telerik