Crash when loading Page with multiple RadListViews embedded in TabView

6 posts, 0 answers
  1. Marc
    Marc avatar
    61 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2016 Link to this post

    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

  2. Marc
    Marc avatar
    61 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2016 in reply to Marc Link to this post

    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.

  3. Marc
    Marc avatar
    61 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2016 in reply to Marc Link to this post

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

    Updated link to the sample project

  4. Deyan
    Admin
    Deyan avatar
    2121 posts

    Posted 22 Jul 2016 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Marc
    Marc avatar
    61 posts
    Member since:
    Oct 2013

    Posted 06 Feb in reply to Deyan Link to this post

    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

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    182 posts

    Posted 06 Feb Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top