How to force Virtual Tile List to update data?

[EmTe]

I have a Virtual Tile List set up and running fine. But when I want to change the data, calling

tileNode.redraw();

doesn't force it to refresh the data. The only way to refresh it so far is:

tileNode.length = 0;
tileNode.redraw();
tileNode.length = arrayList.length;
tileNode.redraw();

I even tried

tileNode.updateTile(0);

but to no avail. Is there a proper function to call?

[sibbl]

I'm still having the same issue.

Seeing some apps out there, which obviously have solved this, I wonder why there's no sample or documentation about how to update lists. The Philips Hue app is a great example of this basic functionality.

When calling `updateTile`, with either the `redraw` option being `true` or `false`, it never calls functions of my delegate again. I also see no option to directly access my element using IDs or other methods as they're encapsulated in their template.

The only option currently is to redraw and set the VTList.length again. But then my users are scrolled to the top of the list all the time...

[sibbl]

Still no update on this? How are the Hue app devs doing the dynamic update then? Direct DOM manipulation only?

I feel like there's no chance I can build my home automation app on this platform... I've been fighting for weeks now.

[YossiStarz]

I had the exact same question today, for some app i am writing. I need to update the data on my tiles pretty frequently, and so far this was the only working solution. But since i cant prevent the scrolling, this solution has a very bad user experience. 

[n0ano]

I know this thread is a little old but just in case others are facing the same issue here's the solution I found for this problem.

The idea is to save the tile structure in the delegate method and then use that saved tile structure to update the display when your data changes.  For example, if my delegate code is:

...

configureTile: function(tile, info) {

  if (info.type == "outlet-pool") {

    let id = tile["id"];

    saved_tile = tile;

    tile.getElementById("text").text = "delegate text";

  }

}

This will set the text when the virtual tile infrastructure decides to draw things.  Later, when your data changes, you can just do:

saved_tile.getElementById("text").text = "updated text";

and the text will be instantly updated wherever it is on (or off) the page.

There are obviously some housekeeping issues to handle (keeping track of which virtual tile is showing your data and what happens if your data is not being displayed by any tile) but these are just details.

Also, note the variable `id', this contains the id for the virtual tile that this delegate is currently operating on, that can be useful information in your housekeeping code.

[triggi]

I think the tile list simply gets re-drawn when the length is set, even when the length is not changed.

[n0ano]

Pretty sure I tried that and it didn't work at the time, maybe things have changed.  If resetting the length works for you then clearly Occam's Razor would recommend it.