Vertical List and scrollbar

Question

Good Day to All.
i have 4 vertical lists side by side. they are all connected to same scrollbar.

all my lists are in reverse order meaning when the array containing the items are updated my first array element is shown on last place in the list.

after going all the way down at the list then starting to scroll back up my empty list index starts to fill itself with replications of the single item that was presented on last place. Here how it looks.

 

This is the top of the list area.
 

 

this is the bottom. see how the items in between first items of the second list and last item is empty normally.

 

after scrolling back upthe info on the last index of the list 2 replicated it self to index 9.       

 

if i scroll more to bottom and back to top rest of the list will continue to fill itself.                              

 

after too many scrolling the list will just fill it self with yellow information completely

 

Thank you all. i can try to post a video or gif if needed

 

 

Answer 1

Hello,

if you observe duplicates of an item within the list, please review the implementation of the corresponding onLoadItem slot methods. This method is responsible for loading the list with its contents. 

One possibility is: the onLoadItem method has loaded the same content twice.

Second possibility: the onLoadItem method has ignored the loading of an item. Internally, the list manages a cache with few item objects. When you scroll the list, the objects are reused and re-loaded with new contents. If the method onLoadItem is not correctly implemented, the reused item will retain its old contents.

To investigate such problems more in detail add trace statements to the onLoadItem method. Then you can print contents of local variables evaluated in the onLoadItem method as well as log decisions made there. The trace outputs are printed in the Log window. You can also use the integrated debugger to step through the code.

I hope it helps you further.

Best regards

Paul Banach

Comments

Hello Paul. Thanks for the response i am still investigating the issue.
Here is a minute long video of what exactly happens.

google drive link

https://drive.google.com/file/d/1pdw-a_QCFIIVvxj1h_SFGsdTb_aLGV30/view?usp=sharing

---

Hello,

the video seems to confirm what I have supposed. When the list scrolls, the items are not correctly re-loaded. The content of some items changes suddenly. I think, you have to continue the investigation whether OnLoadItem method does work as expected. Further hints:

1. Does your actual implementation access the items within the list directly? If yes, this should be avoided. Please see also Access list items and views.

2. When the user drags on the scrollbar, how do you scroll the list? The correct approach would be to adjust the ScrollOffset property of the Vertical List object. Is this the case?

Best regards

Paul Banach

---

Hi Paul,

How the above scroll bar can be configured using scroll bar template / any other way to dynamically change its size if it is connected to a dynamically updated vertical list? Please explain with an example.

Regards,

Sazna.

---

Hello Sazna,

the approach is equal to the of regular scrollbar widgets. Therefore please see Determine the scrollbar's current scroll position and scroll range.

Best regards

Paul Banach

---

Hi Paul,

I have created a scroll bar using component templates. When I press and drag up and down without releasing the finger, it's working fine. But when I drag the thumb to the bottom of the track and release it and then press the thumb to drag upward, it doesn't move. Why it is causing such a problem?

 

 

Regards,

Sazna.

---

Hello Sazna,

the cause is simple: when the thumb moves, the touch handler retains its position. Add following lines to the end of the UpdateViewState() method. This will adjust the position of the touch handler to correspond to the of the thumb:

// Adjust the size of the touch handler to correspond to the size of the thumb
TouchHandlerThumb.Point1.y = thumbPos;
TouchHandlerThumb.Point2.y = thumbPos;
TouchHandlerThumb.Point3.y = thumbPos + thumbSize;
TouchHandlerThumb.Point4.y = thumbPos + thumbSize;

I suppose you decided to use the Vertical Scrollbar Component template because you wanted the Scrollbar to be interactive? If yes, the same could be achieved using regular Vertical Scrollbar widget. Note the section Configure how the scrollbar should react on touch events. But it is just an alternative. Your approach works and it is correct.

Best regards

Paul Banach