Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
micksen
Posts: 17
Registered: ‎07-31-2013
My Carrier: T-Mobile
Accepted Solution

Custom ListItem with Checkbox problem

Hi i want to create a customListItem with a Checkbox. I was able to do this but as soon as i select a checkbox other checkboxes were also checked.

this is my code 

        ListView {
            id: lv_cities
            objectName: "lv_cities"
            listItemComponents: [
                
                ListItemComponent {
                    type: "header"
                    Header {
                        visible: false
                    }
                },
                ListItemComponent {
                    
                    
                    type: "item"
                    Container {

                        background: Color.White
                        Container {
                            
                        
                        layout: StackLayout {
                            orientation:LayoutOrientation.LeftToRight
                        }
                        horizontalAlignment: HorizontalAlignment.Fill
                       
                        background: Color.White
                        CheckBox {
                            id: member
                            objectName: "member"
                            checked: false
                            onCheckedChanged: {
                                console.log(ListItemData.name);
                            }
                        } 

                          Label {
                              verticalAlignment: VerticalAlignment.Center
                              text: ListItemData.name
                                     
                          }  

                    }

                        Divider {
                            
                        }
                    }
                    
                }
                
            ]
            
            onTriggered: {
                
        }
        }

 

so if i click a checkbox it gives me the right name of a city but i don't understand why other rows are also checked.

has someone had a similar expirience and can help me?

 

regards

Please use plain text.
Developer
Benecore
Posts: 275
Registered: ‎08-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

[ Edited ]

I don't see anything that could make all checkboxes checked in this code, but anyway i have one suggestion for you.
Use ListItem.initialized property to make sure that the 'item' is prepared. Because if you will scrolling the ListView, then some of the checkboxes change checked property by itself.



If I helped you give like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Please use plain text.
Contributor
micksen
Posts: 17
Registered: ‎07-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

Hi,

 

thanks for your reply.

 

just for a better understanding. not all checkboxes are checked. 

after the list is loaded no item is selected. 

now if i select one the console shows me the name. (untill here everything is fine.)

 

but now if i scroll down there is at least one other item which is also selected.

 

in most cases this appears 15 items after the seleced item. 

Please use plain text.
Developer
Zmey
Posts: 1,494
Registered: ‎12-18-2012

Re: Custom ListItem with Checkbox problem

Hi,
ListView is reusing it's ListItemComponents during scrolling.
Because of this, checkbox remains in checked state when reused.

Checkbox state can be stored in data model. Bind checkbox's checked property to a datamodel's field, this way it will be reinitialized on reuse.

DataModel can be ArrayDataModel, GroupDataModel or any other type of model.

In general, the idea is that all data and state information is stored in model, ListItemComponents only display that data for appropriate rows.

Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
Benecore
Posts: 275
Registered: ‎08-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

[ Edited ]

@micksen 

Yes, this is the problem. And workaround is using ListItem.initialized

For example:

onCheckedChanged:{
    if (ListItem.initialized){ // or rootContainer.ListItem.initialized
        // bla bla code ;)
    }
}

Hope it helps :smileywink:



If I helped you give like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Please use plain text.
Contributor
micksen
Posts: 17
Registered: ‎07-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

i tried this:

onCheckedChanged: {
                    if (ListItem.initialized){
                    member.checked = false;
                    }
                    console.log(ListItemData.id);
}

  but now i get an error saying Error:

Accessing ListItem.initialized on a node that is not the root node in a list item visual. Try prefixing with the id of the item visual root node.

what does this mean?

Please use plain text.
Developer
Benecore
Posts: 275
Registered: ‎08-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

[ Edited ]

So use commented code

rootContainer.ListItem.initialized

 

btw rootContainer is id of your container, but you know that :smileyhappy:

type: "item"
Container {
id: rootContainer
..... }


If I helped you give like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Please use plain text.
Contributor
micksen
Posts: 17
Registered: ‎07-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

yes i figured it out.

 

but somehow it is still not working for me, it still selects different items if i click one.

Please use plain text.
Developer
Benecore
Posts: 275
Registered: ‎08-31-2013
My Carrier: T-Mobile

Re: Custom ListItem with Checkbox problem

[ Edited ]

The workaround is:

 

1. As @zmey wrote above. Store data and state of items in dataModel.

2. Use ListItem.initialized property in onCheckedChanged signal

 

Here is small example:

import bb.cascades 1.0

Page {
    
    ListView {
        id: listView
        
        onCreationCompleted: {
            for (var i = 0; i < 50; ++i){
// fill the model with item which have two property (text and isChecked) groupModel.insert({"text": "Item ".concat(i), "isChecked": false}) } } function updateItem(indexPath, checked){ var item = groupModel.data(indexPath) item.isChecked = checked groupModel.updateItem(indexPath, item); } dataModel: GroupDataModel { id: groupModel grouping: ItemGrouping.None sortedAscending: true } listItemComponents: [ ListItemComponent { type: "item" Container { id: rootContainer preferredHeight: 100 leftPadding: 15 rightPadding: 15 layout: StackLayout { orientation: LayoutOrientation.LeftToRight } verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Fill Label{ text: ListItemData.text layoutProperties: StackLayoutProperties { spaceQuota: 1 } } CheckBox { checked: ListItemData.isChecked onCheckedChanged: { if (rootContainer.ListItem.initialized){ // Make sure is component prepared rootContainer.ListItem.view.updateItem(rootContainer.ListItem.indexPath, checked) // Call the funtion udpdateItem in ListView } } layoutProperties: StackLayoutProperties { spaceQuota: -1 } } } } ] } }

 Also you can try it without this condition. And you'll see that the problem is back :smileywink:

if (rootContainer.ListItem.initialized){
}

Hope it helps

 



If I helped you give like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Please use plain text.
Developer
Zmey
Posts: 1,494
Registered: ‎12-18-2012

Re: Custom ListItem with Checkbox problem

@Benecore, nice solution, I didn't knew about this workaround. :smileyhappy:

 

If you like puzzles, could you look at this thread:

http://supportforums.blackberry.com/t5/Native-Development/Getting-list-item-from-the-ListView-issue/...

 

It's a similar situation, but there's a ListView with DropDowns in ListItemComponents. I've tried to store their state and update the state when selection is changed by user, but was unable to make it work. Not sure if it will help the thread starter as 5 months have passed, but at least we'll have a solution for DropDowns. :smileyhappy:


Andrey Fidrya, @zmeyc on twitter
Please use plain text.