VirtualTileList redraw not working

[asztalosdani]

Hi,

I have a VirtualTileList in which I want to update the items frequently. The list.redraw() seems to not do anything.

Here is my index.js, where for the sake of this example I want to update every tile with the current timestamp. The style.css and index.gui are the ones from the VirtualTileList example.

import document from "document";

let VTList = document.getElementById("my-list");

let NUM_ELEMS = 100;

VTList.delegate = {
  getTileInfo: function(index) {
    return {
      type: "my-pool",
      value: "Menu item",
      index: index
    };
  },
  configureTile: function(tile, info) {
    if (info.type == "my-pool") {
      tile.getElementById("text").text = `${Date.now()}`;
      let touch = tile.getElementById("touch-me");
      touch.onclick = evt => {
        console.log(`touched: ${info.index}`);
      };
    }
  }
};

// VTList.length must be set AFTER VTList.delegate
VTList.length = NUM_ELEMS;

function callback(timestamp) {
  // Perform animation frame logic here
  VTList.redraw()

  // Request next frame
  requestAnimationFrame(callback);
}

requestAnimationFrame(callback);

What am I doing wrong?

[tik27]

Not sure if its the correct methods, but i have always updated the VTList by updating the length.

[asztalosdani]

Hi tik27,

So I tried changing the update function, to set the length of the list.

function callback(timestamp) {
  // Perform animation frame logic here
  if (VTList.length == NUM_ELEMS) {
    VTList.length = NUM_ELEMS-1;
  } else {
    VTList.length = NUM_ELEMS;
  }
  VTList.redraw()

  // Request next frame
  requestAnimationFrame(callback);
}

The content is now updated correctly, but every time the length is updated, it scrolls to the top, and since I am constantly updating it, the list is esentially stuck at the top.

[qichuan]

There is a setPosition API that you might want to try out? 

See https://dev.fitbit.com/build/reference/device-api/document/

[asztalosdani]

What do you mean? The VirtualTileList has no setPosition method. The documentation you linked shows setPosition only for the ScrollIndicatorElement.

Sorry, but I have to summon you @JonFitbit. Please shed some light here.

[Rajid]

Apparently simply changing the VTList.length is all that's needed in order to force a redraw; calling VTList.redraw() isn't needed at all!  Of course, this does always force the display back to the top of the list as well.  😞  I think I'm going to deal with by using "onmousedown" and "onmouseup" events to say, "if you touch on a list item for more than 1 second (for example), it will be moved to the top".  Not as nice as the tile list reorder functionality, but usable.