listviewblackberryqmlblackberry-10blackberry-cascades

Custom listitemcomponent update issue in listview in blackberry cascades using qml


I have a listview with custom listitemcomponent that displays list of names, when I swipe on the name it shows user full name and profile pic, in order to achieve this I have created 2 views (view 1-with just names (initial display view), view 2- with pic and full name) in my custom listitemcomponent through which I hide the views based on the swipe action and it works fine. Now when I click on any name that name should go to top leaving the rest as it is, in order to achieve this I have maintained an array that keeps the updated list in order so whenever I tap on a name it clears the data model and add item from the updated array, it works as well but the problem is that when I swipe on few names then some rows will have view 1 and some rows will have view 2, at that time when I perform the click action the list re-orders fine but the rows with view 2 contains the same value as before, I have to swipe back and forth to refresh this row.

for eg say I have 4 names in my view displayed as,

1

2

3

4

I have swiped on 2 and 3 so now listview shows -

1

row 2 detail

row 3 detail

4

After clicking on 4, the list shows-

4

row 2 detail //swiping here shows correct value 1 and swipe back shows row 1 detail

row 3 detail

3

So is there anyway to update the custom listitemcomponent or is it possible to delete its instance when I delete the row and recreate again when I add it. Below is a sample structure of my list view. I need this to support it from 10.0 and above

ListView {
                    id: contactListView
                    dataModel: contactsData
                    listItemComponents: [
                        ListItemComponent {
                            id: homeListComponent
                            type: "item"
                            CustomListItemHomePage { //This is my custom listitem that has two views
                                id: listCell

            onClicked:{
                var newContacts = new Array();
                                    newContacts.push(ListItemData.name);
                                    for (var i = 0; i < listCell.ListItem.view.dataModel.size(); i ++)
                                    {
                                        if(listCell.ListItem.view.dataModel.data([ i ]).name!=ListItemData.name)
                                        {
                                         newContacts.push(listCell.ListItem.view.dataModel.data([ i ]).name);
                                        }

                                    }

                                    listCell.ListItem.view.dataModel.clear();
                                    for (var cntNames in newContacts) {
                                        listCell.ListItem.view.dataModel.insert({
                                                name: newContacts[cntNames].toString(),
                                                last: listCell.ListItem.view.dataModel.size(),

                                            })


                                    }
                }
                    }
                    }]
    }

Solution

  • On your CustomListItemHomePage, add these lines of code:

    function init(){
        ListItemData;//This is your new data to (re)init your cell as you wish
    }
    
    ListItem.onDataChanged: {
        init();//RE-init the cell when data is refreshed after recycling
    } 
    
    onCreationCompleted: {
        init();//Init the cell for the first time
    }