RadListView styling & iOS issues

[Marc]

Hi,

I tried to use the RadListView, because its multiselection-feature is very useful for our NativeScript app. I have some trouble using it and I hope you do not mind, if I explain all points in this thread.

 

Firstly, there is no styled selection-behaviour anymore in the RadListView. With the usual ListView, the element got a backgroundcolor when tapping it. Is there a cross platform way to define a style for this behaviour or to set the defaults from the normal ListView at least?

We plan to publish our app for Android, iOS and Windows Phone (when it will be available) and we try to prevent defining this behaviour 3 times with platform specific JavaScript-code.

 

Secondly, when I run the app on Android and iOS, the items are visualized correctly on Android, while they are not visible on iOS (see attachment Android_RadListView and iOS_RadListView). On iOS, you just can see these circles for selecting an item.

I defined the RadListView like this:

<lv:RadListView
        items="{{ items }}"
        itemTap="tapItem"
        itemSelected="itemSelected"
        itemDeselected="itemDeselected"
        selectionBehavior="LongPress"
        multipleSelection="true">
    <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical" />
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
        <StackLayout cssClass="listItem">
            <Label text="{{ name }}" />
        </StackLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

(the observable-array 'items' contains objects with just one field name for simplicity)

My test configuration is:

• Telerik AppBuilder 3.3.2-692
• NativeScript version 2.0
• tns-core-modules version 2.0.1
• NativeScript Telerik UI version 1.2.0
• tested on iPhone 4S and iPhone 6 with iOS 9.3
  

 

Thirdly, as you can see in the screenshots in the attachment, I want to use the multiselection-feature of the RadListView and I wonder if I can configure the selection-style (selection-behaviour). On iOS I don't want to show these circles to mark a selected item. I prefer the way selected items are marked on Android and I am sure that i could modify this using iOS specific JavaScript code, but maybe there is (or will be) a cross platform way to do this?

 

Best regards and thank you in advance for your help.

[Deyan]

Hello Marc,

Thanks for writing and for the provided screenshots.

Before getting to your question I would like to clarify that the nativescript-telerik-ui plugin has been tested with the 2.1.0 version of NativeScript. 2.1.0 is the current official version available on NPM. Since you are working in AppBuilder context, I can suggest switching to NativeScript 2.1.0 experimental and trying your scenario.

In case switching to 2.1.0 doesn't resolve the styling issues, I would kindly like to ask for some more details like the content of your CSS file.

Here you can find more information on how the AppBuilder NativeScript environment is changed:

http://docs.telerik.com/platform/appbuilder/nativescript/configuring-your-project/configure-target-framework

As for the selection behavior: currently RadListView behaves a bit differently depending on the context (iOS or Android). You can easily change this by introducing a 'isSelected' property on your business object, binding the background color of your item to it and updating the property on itemSelected/itemDeselected to reflect the item's selection state. This will change the item's background accordingly.

I hope this is helpful but don't hesitate to write back in case of further questions.

Regards,
Deyan
Telerik by Progress

[Marc]

Hi Deyan,

thanks for your fast response!

Indeed, when switching to NativeScript 2.1.0 experimental, the ListView-items are properly visualized. In my cssClass 'listItem' I just manage some padding and margin and I do not have any other css applied to the RadListView yet.

Ok, changing the backgroundColor may work for me, but on iOS (with NativeScript 2.1.0), there are still these circles to indicate, if an item is currently selected and the idea is not bad. But it would be better to show these circles only when at least one item is selected., so the user knows when he is in selection-mode. Is there a way to 'deactivate' them? (maybe in a future release of Telerik UI for NativeScript)

 

And what about tapping a list item... is there a reason why there is no 'default tapping style' compared to the usual ListView widget?

 

I forgot one problem in my last post:

when loading a page with a RadListView for a second time, my app freezes and I am pretty sure that this is caused by re-initializing my observable-array using myArray= new observableArrayModule.ObservableArray([]) everytime I load the page. I cannot find a smoother or cleaner way in the docs how to 'reset' an observable-array. When I delete this command, the RadListView is loaded correclty (but the items are just appended to the end of the existing observable-array). Setting the length of the observable-array to 0 also freezes the app.

 

Best regards and thank you for your help!

[Marc]

I have to add one detail to the ending of my last post:

this only happens on Android.

Sorry, next time I will split my problems to separate threads.

 

[quote]Marc said:

...

I forgot one problem in my last post:

when loading a page with a RadListView for a second time, my app freezes and I am pretty sure that this is caused by re-initializing my observable-array using myArray= new observableArrayModule.ObservableArray([]) everytime I load the page. I cannot find a smoother or cleaner way in the docs how to 'reset' an observable-array. When I delete this command, the RadListView is loaded correclty (but the items are just appended to the end of the existing observable-array). Setting the length of the observable-array to 0 also freezes the app.

...

[/quote]

[Deyan]

Hello Marc,

Thanks for writing back.

It will indeed be much better if you separated the issues in different threads as it is easier for us to focus on handling them. Thanks for your cooperation on that!


1. The 'listview freezing' issue is not familiar to us and we cannot reproduce it. Can you isolate it in a separate project or possibly send us the app you are working on for further investigation? You can also paste the XML and source files of the particular scenario here.

2. As for the selection behavior of RadListView on Android and iOS: we wanted to expose a unified API that allows you to implement selection in RadListView but still keep the UX as native as possible. That said, the Android ListView (powered by RadListView from UI for Android) does not have selection circles or a visual selection state by default. ListView for iOS (powered by TKLIstView from UI for iOS) has the selection circles when selection is enabled. You can, however, easily unify this behavior by applying a backgroundColor on the root panel within your itemTemplate and changing it depending on the selection state of the item. You will need to introduce a isSelected property on your business objects and bind the background color of the root item to this property. 

You can see more code regarding selection here: 

https://github.com/telerik/nativescript-ui-samples/tree/release/sdk/app/listview/listview-selection

And also here:

https://github.com/NativeScript/nativescript-marketplace-demo/tree/production/app/examples/listview/selection

I hope this is helpful.

Regards,
Deyan
Telerik by Progress

[Marc]

Hello Deyan,

thanks for your help and for your advice. I will follow you instructions to get a unified selection behaviour for Android and iOS.

 

Concerning the freezing-issue:

I need to correct my last post again... the app crashes (freezes) on iOS , but everything works perfect on Android devices. Sorry for confusing you.

I created a separate sample project where the issue can be reproduced by the following steps:

• navigate to the page with RadListView using the Button on homescreen
• the RadListView will be filled with data from a webservice
• when it is loaded, navigate back using the back-Button
• navigate to the RadListView-page again

The project can be found with the following URL:

Link to sample project on Google Drive

 

The project is created using the NativeScript CLI and tns-core-modules 2.1. Acually we build our own project via AppBuilder, but I wanted to use the latest stable NativeScript version, as you told me that Telerik UI for NativeScript is tested with this version. In AppBuilder this version of NativeScript is experimental only right know. That's why I provide a tns-project for you.

 

I tested this on iPhone 4s and iPhone 6 with ios 9.3.2. On both devices, the app freezes when loading the webservice-data into the RadListView for the second time. In the attachment, you can see a Screenshot from the log created by XCode. Maybe this helps you in any way to understand what is going on here.

 

I want to apologize again for mixing multiple topics in this thread and for confusing you by accidentally naming the wrong platform where I get this issue. Once again: the issue occurs only on iOS, not on Android.

 

Best regards and thanks for your cooperation

[Deyan]

Hello Marc,

Thanks for the project.

I have been able to reproduce the issue and to find a way to workaround it. You will need to subscribe for the `navigatingFrom` event of the Page where the listview resides and clear the bindingContext of the page when navigating back:

exports.navigatingFrom = function (args) {
    if (args.isBackNavigation === true) {
        args.object.bindingContext = undefined;
    }
};

And here's how I am subscribing for this event in my XML file:

navigatingFrom="navigatingFrom"

FYI:

I think the issue appears because when first navigating to the page you assign a ViewModel object as a binding context that is not destroyed on back navigation. Thus RadListView remains in memory and when loading it anew, the state is broken as soon as the new data is assigned (there seems to be some kind of a weak point in RadListView which occurs in this particular case).

I hope this helps.

Regards,
Deyan
Telerik by Progress

[Marc]

Hello Deyan,

thank you for your help, this solves my problem!

 

Is this supposed to be fixed for the RadListView component in the future? Or is it a better idea always to destroy the bindingContext when leaving the current page? But I didn't make any experiences, where this would have been necessary so far and the issue I described here seems to be iOS-specific only (on our test devices at least).

 

Best regards

[Deyan]

Hi Marc,

Thanks for writing back.

For now, my advice would be to keep clearing the bindingContext. It won't hurt and it resolves your case. The behavior on iOS is related to a bug in UICollectionView on which our RadListView for iOS is based and we are currently looking into ways to workaround it.

Let me know in case of further questions.

Regards,
Deyan
Telerik by Progress