Binding a listview does not update it automatically


#1

I am new to Nativescript and I am trying to constantly update a listview (inside a side drawer). This is the code I am using:


var observable = require("data/observable");
var pageModule = require("ui/page");
var viewModel = new observable.Observable();
var geolocation = require("nativescript-geolocation");
var view = require("ui/core/view");


var activeLoc = [];
activeLoc.push({listLat:"123",listLon:"456"});


//Controls orientation and adjust compass head if in landscape

var drawer;
exports.pageLoaded = function(args) {
    page = args.object;
    drawer = view.getViewById(page, "sideDrawer");
    viewModel.set("activeList",activeLoc);
    page.bindingContext = viewModel;
}

exports.toggleDrawer = function() {
    drawer.toggleDrawerState();
};


//Update dashboard
function updateDash(args) {
    var lat = args.latitude;
    var lon = args.longitude;

    function formatDate(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var secs = date.getSeconds();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ':' + secs; //ampm;
  return strTime;
}

var d = new Date();
var e = formatDate(d);

console.log(e+" Current location is: " + lat +", "+ lon);
        activeLoc.push({listLat:lat,listLon:e});
        page.set("activeList",activeLoc)
           
}
exports.updateDash = updateDash;




//starts dashboard
watchId = geolocation.watchLocation(
function (loc) {

    if (loc) {
        //console.log("Received location: " + loc);
        

        updateDash(loc)                
    }
}, 
function(e){
    console.log("Error: " + e.message);
},
{desiredAccuracy: 3, updateDistance: 10}); 

Basically it keeps reading the lat/long and updating the variable/array activeLoc. I see (using console.dump) the activeLoc is being updated but, unfortunately the listView has not.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:sd="nativescript-telerik-ui/sidedrawer" class="page" actionBarHidden="true" xmlns:map="nativescript-mapbox" loaded="pageLoaded">
    <Page.actionBar>
        <ActionBar title="Dashboard">
            <android>
                <NavigationButton icon="res://ic_menu" tap="showSlideout" ios.position="left"/>
            </android>
            <ios>
                <ActionItem icon="res://ic_menu" ios.position="left" tap="showSideDrawer" />
            </ios>
        </ActionBar>
    </Page.actionBar>




    <sd:RadSideDrawer id="sideDrawer" drawerLocation="left">
        <!-- side drawer content -->
        <sd:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left">

                <StackLayout class="sidedrawer-content">
                    <ListView id="pilotList" items="{{ activeList }}">
                        <ListView.itemTemplate>
                            <GridLayout columns="*,*2,*">
                                <Label text="{{ listLat }}" col="0"  class="listNick" />
                                <Label text="{{ listLon }}" col="1"  class="listSpeed" />
                            </GridLayout>
                        </ListView.itemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </sd:RadSideDrawer.drawerContent>
      
      
        <!-- The main content -->
        <sd:RadSideDrawer.mainContent>

                <!-- <GridLayout columns="*" rows="60,*,50,32" style.backgroundColor="#182126">  -->
                <GridLayout columns="*" rows="60,*,60" style.backgroundColor="#36283D">   

                    
                    <ContentView row="2" tap="toggleDrawer">
                        </ContentView>

                </GridLayout>

            </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>
</Page>

Any ideas on what am I doing wrong?
Thanks,
Alex


#2

Have you figured out already?

If you use an observableArray, it’s suppose to update the list for you. However, i had issues as well, and what fixed it for me was to get the listview by id and calling refresh(), something like this:

var listView = this.page.getViewById(“pilotList”);
listView.refresh();

you need to have access to page, but this is the idea. If you’re still looking for help, let me know.

Good luck!


#3

Thanks Henrique! I got it with the observableArray!


#4

Refresh radlistview nativescript on updating data
radlistview refresh
<RadListView #myListView></RadListView>

@ViewChild("myListView") listViewComponent: RadListViewComponent;
//use this whenever you update data in dataItems
this.listViewComponent.listView.refresh();