Tizen list view add items dinamically

Galaxy Watch for Tizen Tizen Web APIs
1

hello, hope your help here. please refer to the below image.

Screenshot 2021-09-03 at 20.14.03
Screenshot 2021-09-03 at 20.14.03798×672 140 KB

I have created a component and dynamically add it to the Tizen list view. but unfortunately, it’s not scrolling and its items are placed as here. I need a list view same as when we doing a static list view.

my HTML code.

<div class="ui-content" id="items-content">
      	<ul id="items-content-ul" class="ui-listview">
	</ul>
</div>

The javascript part is below.

var itemsList = document.getElementById("items-content-ul");

... data fetching...

for (var i=0; i<listData.length; i++) {
		
		// create li component
		var cardLi = document.createElement("li");
		
		// create card view
		var card = document.createElement("div");
		card.className = "card";
		
		//create text area
		var textArea = document.createElement("textarea");
		textArea.disabled = true;
		textArea.className = "card-title";
		textArea.rows = 2;
		textArea.innerHTML = "My First List";
		card.appendChild(textArea);

        cardLi.appendChild(card);
        itemsList.appendChild(cardLi);
}

The items loading to dom happened when page change event.
my card components rendered well, but no success for the list view. hope for your support. thank you!

2

Hello,
I have found a sample app from a blog which implements the same scenario as you mentioned. And it works.

3

Thank you! but this is not explaining dynamically adding the elements. I found a way to do it.

// this is my item list 
var itemsList = document.getElementById("items-content-ul");

//get it as tau list view
var tauItemList = tau.widget.Listview(itemsList);

//create list index
var listIndex = 1;

// now we have to append our children's to this list view. I use for loop to append children's

for (var i=0; i<listData.length; i++) {

    //create li component first
    var li = document.createElement(li);
    var div = document.createElement(div);
    .....
    // append components to li
    li.appendChild(div);

    // finally append li to ul as below
    tauItemList.addItem(li.innerHTML, listIndex);
   
   // increment the list index
   listIndex++;
}

Please remember to make your list as a tau component and that’s the point. but this is really good for the text list. for my work, this worked. but my all the cards are a little bit collapse top and bottom with other cards.

but the list works well as I expected. I don’t know to make the gaps between these ui-listview classes. if anyone knows about making the gaps between list view items, please answer here!