[Solved] Crash when loading Page with multiple RadListViews embedded in TabView

[Marc]

Hello,

we want to put a TabView in our page, where each tab contains one RadListView.

Unfortunately the app crashes when I navigate to this page and the RadListViews should be filled with data items coming from a sample-webservice.

In the attachment, you can see the log from Xcode. I created a sample project, so I hope you can reproduce the issue. Here is the Link to the sample project

 

The project is tested with the following configuration:

• NativeScript CLI version 2.1.1
• tns-core-modules 2.1.0
• devices: iPhone 4s & iPhone 6 with iOS 9.3.3

 I hope you can reproduce the issue and I am thankful for any advice.

 

Best regards

[Marc]

[quote]Marc said:

...

The project is tested with the following configuration:

• NativeScript CLI version 2.1.1
• tns-core-modules 2.1.0
• devices used: iPhone 4s & iPhone 6 with iOS 9.3.3

...

The issue occurs only on iOS. Everything works fine on Android.

[Marc]

Something went wrong with the link.... here is the correct one:

Updated link to the sample project

[Deyan]

Hi Marc,

As discussed in a previous ticket you've opened regarding RadListView, there seems to be a bug in the native iOS UICollectionView that causes issues in certain cases:

http://stackoverflow.com/questions/12611292/uicollectionview-assertion-failure

There are several suggestions for effective workarounds and we are going to evaluate them before committing to any fixes. For the time being, here is a slightly updated code snippet from your app that addresses the erroneous behaviour:

loadCountries: function() {
        var self = this;
        self.set("statusWorking", true);
        // self.set("countries1", new observableArrayModule.ObservableArray([]));
        // self.set("countries2", new observableArrayModule.ObservableArray([]));

        httpModule.request({
            url: "http://services.groupkt.com/country/get/all",
            method: "GET",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }).then(function(response) {
            var list = response.content.toJSON().RestResponse.result;
            var c1 = new observableArrayModule.ObservableArray();
            var c2 = new observableArrayModule.ObservableArray();
            list.forEach(function(country) {
                c1.push(country);
                c2.push(country);
            });

            self.set("countries1", c1);
            self.set("countries2", c2);

            self.set("statusWorking", false);
        }, function(e) {
            console.log(e);
            self.set("statusWorking", false);
        });
    }

I am sorry for the inconvenience caused.

Let me know in case of further questions.

Regards,
Deyan
Telerik by Progress

[Marc]

Hello,

are there any updates concerning this issue? The iOS-app is still crashing when navigating to a page with a TabView, whose tabs contain a radListView instance (sometimes it happens when leaving the page).

 

Now I use NativeScript 2.5.0 with Telerik UI for NativeScript 1.6.0. When I open my TabView-page under iOS, I get some warnings and error messages in the log:

 

<Warning>: *** Assertion failure in -[TKCollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:], /SourceCache/UIKit/UIKit-3347.44.2.2/UICollectionView.m:3870
<Error>: +[TNSRuntime _getCurrentStack]: unrecognized selector sent to class 0xd9d670

<Error>: -[TNSDictionaryAdapter isEqualToString:]: unrecognized selector sent to instance 0x1778b840
<Error>: +[TNSRuntime _getCurrentStack]: unrecognized selector sent to class 0xcfb670

 

Best regards,

Marc

[Nick Iliev]

Hi Marc,

I've tested your scenario in this test application and to overcome the issue with that the colleague has described I've introduced some minor changes to your code.
The issues appeared when using ObservableArray in combination with data coming from HTTP (or other async data source). However, as a workaround, you can use an array for your data and refresh the first list-view once the data is received from your online source. The whole source code can be found in the link above, but for your convenience here is the steps described one by one.

the ViewModel using Array instead of ObservableArray

main-view-model.ts (if you prefer pure JavaScript code refer to the test application in the link above)

export class HelloWorldModel extends Observable {

    public items = [];
    public items2 = [];

    constructor() {
        super();
        this.loadCountries()
    }

    loadCountries() {

        httpModule.request({
            url: "http://services.groupkt.com/country/get/all",
            method: "GET",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }).then(response => {
            var list = response.content.toJSON().RestResponse.result;

            list.forEach(country => {
                console.log(country.name);
                this.items.push(country);
                this.items2.push(country);
            });
        });
    }
}

No changes made to the tab-view page itself - the code can be found here.
And finally, to overcome the fact that your items are no longer an ObservableArray (and won't update on change detection), you will have to load the items in the first tab and then refresh the listview manually as follows:
main.page.ts

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;

    page.bindingContext = vm;

    let list1 = <RadListView>page.getViewById("listviewCountries1");
    setTimeout(function() {
        list1.refresh();
    }, 300);
}

The solution now allows you to have multiple tabs with various RadListViews created.

Regards,
Nikolay Iliev
Telerik by Progress