Languages

Menu
Sites
Language
Add items with checkboxes on a list via Listview

Hi, 

I'm trying to add in my application a dynamic list with checkboxes. But all tries failed and the result isnt a correct display of the list item - or better the checkbox looks not like on a static list, its just a small native checkbox.

With all other types I have no problem to generate the list dynamic, only checkboxes.

My code

function generateChechkboxList() {
    var ls = localStorage.getItem('db'),
        list = document.querySelector('div.ui-page-active div[data-role=content] ul'),
    	listView = tau.widget.Listview(list);

    if(ls)
    {
        var data = JSON.parse(ls).results,
            listItem = '';

        listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
    	listView.addItem(listItem, 0);

        jQuery.each(data, function(index, value) {
            listItem = '<li class="ui-li-has-multiline ui-li-dialogue"><a href="#">'
    			+ '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+item.eventId+'" />'
				+ item.title
				+ '<span class="ui-li-text-sub">'+status+': '+item.person+'</span>'
				+ '</a></li>';
			listView.addItem(listItem, 1);
        });
    }
}

Without checkbox the list item will show correct :)

List

Responses

10 Replies
AVSukhov

Hello,

I have tested your code on Z1 and i get following result:

Do you have the same result?

Also, a don`t known structure of your data, and i use simple array and "for" loop.

Marco Buettner

Yeah the result on your Z1 looks like I want, but it looks different... My structure is a array of objects, so yeah... maybe I change to a for-loop. In previous version I used a bunch of objects instead an array (I dont know why :D)

In my result the checkbox was not display like the Tizen UI it should, it was just the native checkbox...

Marco Buettner

My result :(

Vikram

Hi Marco Buettner,

As your sample code, "<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+item.eventId+'" />"

The "i" should be "index" according to the context. 

Possible, this is the root cause. :)

Marco Buettner

I have change the code from jQuery.each to for-loop and now the i is correct, but it change nothing for the display :(

Marco Buettner

Thats my result

What I do

Click on button and change the page from "overview" to "delete".

My code on "delete" page

$(document).on('pageshow', '#page_delete', function() {
    generateDeleteList();
});

list.js

function generateDeleteList() {
    var storage = localStorage.getItem('db'),
        list = document.querySelector('div.ui-page-active div[data-role=content] ul'),
        listView = tau.widget.Listview(list);
    
    if(storage)
    {
        var results = JSON.parse(storage).results, // return array of object
            length = results.length,
            result = null,
            i = null,
            listItem = "";

        listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
        listView.addItem(listItem, 0);

        for(i = 0; i < length; i++)
        {
            result = results[i];
            listItem = '<li class="ui-li-has-checkbox ui-li-has-multiline ui-li-dialogue">'
                        + '<a href="#">'
                        + '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+result.eventId+'" />'
                        + result.title
                        + '<span class="ui-li-text-sub">'+result.person+'</span>'
                        + '</a>'
                        + '</li>';
            listView.addItem(listItem, 1);
        }
    }
}

 

AVSukhov

Hello,

This is my code:

function generateChechkboxList() {
        var ls = null,
            list = document.querySelector('ul'),
            listView = tau.widget.Listview(list);

        ls = {
        		results: [
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    }
        		]
        };
        
        if(ls)
        {
             var   listItem = '';

            listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
        	listView.addItem(listItem, 0);

        	for(var i=0;i<ls.results.length;i++) {
        		listItem = '<li class="ui-li-has-multiline ui-li-dialogue"><a href="#">'
        			+ '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+i+'" />'
    				+ ls.results[i].item
    				+ '<span class="ui-li-text-sub">'+ls.results[i].item+': '+ls.results[i].item+'</span>'
    				+ '</a></li>';
    			listView.addItem(listItem, 1);
        	}
        }
    }
    
    generateChechkboxList();

and html:

<div data-role="content">
    <ul></ul>
</div>

Tested on Z1

Marco Buettner

I dont know where is my failure...

​I find out when I open the page a second time, I see for short time (at least 1s) the correct result and than, it will appear like on my screenshot. I need to load the list on pageshow, because it should reload every time when the page will be show.

​

​

​

​

​

​

​

​

​

​

Marco Buettner

AVSukhov can I contact you on a private way to share my project? Maybe you can find a solution or my failure??

AVSukhov

Hi Marco,

You can contact with me by: avsukhov.nn@mail.ru