Numbered List: Take Two

I had posted yesterday how I had managed to use the listData property to add numbers to the list item renderer. However this technique broke when the List actually extended beyond viewable area and became scrollable. I have the updated the example to reflect the fix but here is what I learned during the entire process.

1) The list draws out as many itemRenderers as can be rendered if the dataProviders length is more than the numbers that can be drawn on the list without scolling.
2) List item sets the data value of the item renderer.
3) If the renderer extends IDropInListItemRenderer interface, the list sets the listData value on the renderer. The listData gives some more info to the renderer such as what its row index is,etc.
4)When the user scrolls the list, the labels are rewritten on the same renderers without actually drawing new renderers.

To actually implement the numbering, I ended up using the renderer’s owner property to get a reference on the List and then using the itemRendererToIndex method on the List passing it itself as the parameter. This now works much better as you can see. Right-click to view source :).

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist. View all posts by Arpit Mathur