Binding a listview does not update it automatically


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 = [];

//Controls orientation and adjust compass head if in landscape

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

exports.toggleDrawer = function() {

//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);
exports.updateDash = updateDash;

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

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

    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=""  xmlns:sd="nativescript-telerik-ui/sidedrawer" class="page" actionBarHidden="true" xmlns:map="nativescript-mapbox" loaded="pageLoaded">
        <ActionBar title="Dashboard">
                <NavigationButton icon="res://ic_menu" tap="showSlideout" ios.position="left"/>
                <ActionItem icon="res://ic_menu" ios.position="left" tap="showSideDrawer" />

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

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

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

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



Any ideas on what am I doing wrong?


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 =“pilotList”);

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

Good luck!


Thanks Henrique! I got it with the observableArray!


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

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