Tizen dynamic list not scrollable by wheel

Question

A simple list like

<div class="ui-page ui-page-active" id="main" >
        <ul id="currentList" class="ui-listview ui-virtuallistview">
            <li>test</li>
            <li>test2</li>
        </ul>
</div>

in Tizen for the wearable round watch Gear S2 is working very well. We can scroll the list through the watch-wheel and the current item appears to be selected.

After changing / adding some new list items via jquery, the new items are not scrollable by the watch-wheel.

$("#currentList").append('<li>testXXX</li>');

we tried

$("#currentList").listview('refresh');

to update and re-evaluate the list, but the function is not available.

No, it still does not update or "re-evaluate" the list with tizen elements. — elCapitano, Nov 27 '15 at 11:59
I solved it. I update the tau library to the version 0.10.29-9 and now it works. I hope it helps you. — Yeray, Dec 01 '15 at 11:01
@Yeray i am using the same lib but it does not work. how did you manage it? — elCapitano, Dec 12 '15 at 08:14
@elCapitano I just hit the same issue, any fixes in the meantime? — Thomas Jungblut, Jan 04 '16 at 20:55
@ThomasJungblut We don't have any solutions or fixes yet. Even the workaround did not help in any way. — elCapitano, Jan 05 '16 at 13:05
@elCapitano I think I got it running by refreshing the widget: `tau.widget.getInstance('overview-list').refresh();` and including the circle helper js from the component sample `js/circle-helper.js`. — Thomas Jungblut, Jan 05 '16 at 20:04
@ThomasJungblut Thank you. I'll give it a try in a few weeks :) — elCapitano, Jan 06 '16 at 15:08
@elCapitano your solution using `tau.widget.getInstance('overview-list').refresh();` works and is the way to go. As the bug still persists, it would be great if you could add this as an answer for improved visibility. — Henry, Nov 20 '17 at 22:10

Shreeram K · Answer 1 · 2015-11-22T16:46:15.830

3

There is no jquery library available by default with in the web app you created for circular gear. Hence, the function is not available listview().

You have to include the jquery library in your project then only you can call the listview('refresh') to refresh your list.

EDIT: How to scroll list using beezel/wheel?

To scroll a list using beezel(wheel) some extra code and libraries needs to be included in the project.

Please check following sample project available within the SDK

File -> Tizen New Project -> Sample -> UI -> UI Components

The main page of this sample app shows a list which is scrollable using the beezel.

You can take this project as reference to create all type of UI designs as per Gear S2 UI Guidelines.

edited Nov 22 '15 at 16:46

answered Nov 22 '15 at 16:02

Shreeram K

1,719
13
22

Thank you @srkushwaha. We already have jquery included. The new list items are being displayed but we are not able to scroll through the list with the wheel. We also tried https://developer.tizen.org/ko/development/ui-practices/web-application/tau/applications-circular-ui/creating-snap-lists?langredirect=1 without any success – elCapitano Nov 22 '15 at 16:29
1

Ok I ll update my answer on how to scroll the list using the wheel. – Shreeram K Nov 22 '15 at 16:30
Unfortunately it does not work if you change the list dynamically. On static lists it works perfectly. Do you have another idea? Thanks – elCapitano Nov 27 '15 at 11:58

score 0 · Answer 2 · answered Dec 14 '15 at 10:34

Yep, I put empty items inside the list element, like this:

<ul id="boardList" class="ui-listview">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    ...
</ul>

After, in the js file I removed this and I added the new elements. I read that it's a bug.

init function:

document.getElementById("boardList").style.display = 'none'; //hide dummy list

success function:

var list = document.getElementById("boardList");
list.innerHTML = ""; //clean dummy list
list.style.display = ''; //show list
for (var j = 0; j < boardingList.length; j++) {
    showItemList(j,list);
}

Tizen dynamic list not scrollable by wheel

2 Answers2