Listview error TELERIK-UI


#1

After playing a bit with the listView, I get this error:
file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:639:44: JS ERROR TypeError: null is not an object (evaluating 'currentIndexPath.row')


#2

can you give a little more code to analyze?


#3

It is a bit bigger code than I can share here but I think this snippet may bring some more clarity (basically it is a listView loaded by a table, which is loaded by a Firebase query - everything works fine until I keep opening/close each item from the list. After doing it 4-5 times, I get the error above):

flights.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:lv="nativescript-telerik-ui/listview" class="page" actionBarHidden="false" loaded="pageLoaded" xmlns:x="nativescript-statusbar" backgroundSpanUnderStatusBar="true" backgroundColor="#182126">
    <Page.actionBar>
        <ActionBar title="{{ L('flightsTitle') }}" icon="" class="action-bar" backgroundColor="#2b3438" />
    </Page.actionBar>
     <GridLayout columns="*" rows="*,1,45" style.backgroundColor="#182126" id="alertGrid">   
        <ContentView row="0"> 
                            <lv:RadListView id="listview" class="list-group" backgroundColor="#172126" items="{{ items }}" swipeActions="false" itemTap="listViewItemTap"
                                row="1" 
                                selectionBehavior="None"
                                multipleSelection="false" 
                                itemLoading="onItemLoading"
                                itemSelected="onItemSelected"
                                
                             >
                                <lv:RadListView.listViewLayout>
                                    <lv:ListViewLinearLayout scrollDirection="Vertical"/>
                                </lv:RadListView.listViewLayout>
                                <lv:RadListView.itemTemplate>
                                    <GridLayout columns="*2,*,*,*" rows="*" backgroundColor="#172126">
                                        <Label text="{{ flightName }}" col="0" class="list-group-item-heading" />
                                        <StackLayout orientation="horizontal" col="1" class="stackRight">
                                            <Label text="{{ flightTime }}" textWrap="true" class="flightTime" />
                                            <Label text="h" textWrap="true"  class="hTime" />
                                        </StackLayout>
                                        <StackLayout orientation="horizontal" col="2" class="stackRight">
                                            <Label text="{{ flightDistance }}" textWrap="true" class="flightTime" />
                                            <Label text="{{mi}}" textWrap="true"  class="hTime" />
                                        </StackLayout>
                                        <StackLayout orientation="horizontal" col="3" class="stackRight">
                                            <Label text="{{ flightMaxSpeed }}" textWrap="true" class="flightTime" />
                                            <Label text="{{ mph }}" textWrap="true"  class="mphTime" />
                                        </StackLayout>
                                    </GridLayout>
                                </lv:RadListView.itemTemplate>
                                
                            </lv:RadListView>   
        </ContentView>
        <ContentView row="1" backgroundColor="#3AB8FF" />
        <ContentView row="2">
            <GridLayout columns="*,*,*" rows="*" class="bottomBar" backgroundColor="#1F272A"> 
                <Image src="res://ic_dashboard" row="0" col="0" class="dashIcon" id="dashIcon" tap="showDash"  horizontalAlignment="left"></Image> 
                <Image src="res://ic_flights_on" row="0" col="1" class="flightsIcon" id="flightsIcon"></Image>
                <Image src="res://ic_settings" row="0" col="2" tap="showSettings" class="settingsIcon" id="settingsIcon" horizontalAlignment="right" ></Image>
            </GridLayout>
        </ContentView>
    </GridLayout>
</Page>

flights.js

var listview

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;

var page;
var items = new ObservableArray([]);
var pageData = new Observable();

exports.pageLoaded = function(args) {
    page = args.object;
    listview = page.getViewById("listview");
    
    page.bindingContext = pageData;
    pageData.set("items", items)
    
    loadList();
}

exports.listViewItemTap = function(args) {
    appSettings.setString("fid", String(items.getItem(args.index).fid));
    var navigationEntry = {
            moduleName: "flight-page",
            context: {fid: items.getItem(args.index).fid},
            animated: false,
            clearHistory: false
        };
        frames.topmost().navigate(navigationEntry);
}

#4

hm, so opening/closing the elements in the list cause an error. I think debugging around itemSelected would be in order. Can you console.log what currentIndexPath.row returns?


#5

Not sure what line of code should I add in the listViewItemTap function. Can you please clarify?


#6

I would dump out the args that come through when you tap. What’s it showing?