How can I deselect an item from ListView in cascade?

Question

I'm developing a BlackBerry 10 mobile application using the Momentics IDE (native SDK).

I have a simple ListView and I want to change the background of a specific item when clicked according to the selection status. I thought th code below will work but it doesn't, any one can help one this ?

ListView{
        id: simpleList

        dataModel: groupDataModel

        listItemComponents: [
            ListItemComponent {
                type: "item"

                SQLvListItem {
                    id: containerItem

                    itemLabel: ListItemData.label

                    // Item Label Style
                    itemFontSize: ListItemData.fontSize
                    itemFontName: ListItemData.fontName
                    itemFontStyle: ListItemData.fontStyle
                    itemFontColor: containerItem.ListItem.selected ? ListItemData.fontColorSelected : ListItemData.fontColor

                    //Item background
                    containerBorderColor: ListItemData.borderColor
                    containerBackgroundColor: containerItem.ListItem.selected ? ListItemData.backgroundColorSelected : ListItemData.backgroundColor
                }
            }
        ]

        onTriggered: {
            var selectedItem = dataModel.data(indexPath);

            if (selected() == indexPath){
                select(indexPath, false);
                dataModel.itemUpdated(indexPath)
            }       
            else{
                select(indexPath, true);
            }
        }
    }

PS: the "SQLvListItem" is a custom item which I created

The issue I'm seeing is the SQLvListItem assignment is happening on initialization, and not onTriggered. Can you break out the background assignment to a javascript function and call that function in your OnTriggered? — Dakotah Hicock, Oct 21 '14 at 15:31
The problem is when I call the "clearSelection()" function inside the triggered of the ListView and I keep the background assignment in "SQLvListItem" it deselect all (change the background of all items to its originals), so I'm wondering why it doesn't work when I put " select(indexPath, false)" — Mohamed Jihed Jaouadi, Oct 21 '14 at 15:37
Where is your `clearSelection()` function? I don't see it get called at all. I'll add an answer with what I mean in a moment. — Dakotah Hicock, Oct 21 '14 at 15:41

score 1 · Answer 1 · answered Oct 21 '14 at 15:47

In your SQLvListItem, add a property that is a bool for "IsSelected" and add containerSelectedBackgroundColor with containerUnselectedBackgroundColor and itemSelectedFontColor with itemUnselectedFontColor.

Then you can make a function like so:

function selectedBackground(selectedItem){
    if(selectedItem.isSelected){
        selectedItem.itemFontColor: selectedItem.itemSelectedFontColor;
        selectedItem.containerBackgroundColor: selectedItem.itemSelectedFontColor;
    }
    else{
        selectedItem.itemFontColor: selectedItem.itemUnselectedFontColor;
        selectedItem.containerBackgroundColor: selectedItem.itemUnselectedFontColor;
    }
}

That way you have variables to store the selectedColor and unselectedColor for both font and background, and then you can swap them out on the fly. When it gets selected, just flag the isSelected as true when it is selected, and false when it isn't.

I only have a snippet of your code to go off of, so I don't know for sure if this will work, but it's worth a shot!

Actually I did something like this before, but the inconvenient of this method is that it is valid only with a ListView with multiple selection but when it comes to a single selection type, you cannot afford the changement of others items backgrounds with this. **PS:** the ListView can be a list with single or multiple selection. — Mohamed Jihed Jaouadi, Oct 21 '14 at 15:52
This shouldn't change the backgrounds of others. It only modifies the selectedItem — Dakotah Hicock, Oct 21 '14 at 16:39
Why are you wanting to change the backgrounds of items you didn't select? I don't quite understand. — Dakotah Hicock, Oct 21 '14 at 16:50

Mohamed Jihed Jaouadi · Accepted Answer · 2014-10-27T10:04:44.893

Actually it was so simple, you just need to use toggleSelection() function which toggles selection on an item ; if the item is selected, it becomes deselected and if the item is deselected, it becomes selected.

    ListView{
            id: simpleList

            dataModel: groupDataModel

            listItemComponents: [
                ListItemComponent {
                    type: "item"

                    SQLvListItem {
                        id: containerItem

                        itemLabel: ListItemData.label

                        // Item Label Style
                        itemFontSize: ListItemData.fontSize
                        itemFontName: ListItemData.fontName
                        itemFontStyle: ListItemData.fontStyle
                        itemFontColor: containerItem.ListItem.selected ? ListItemData.fontColorSelected : ListItemData.fontColor

                        //Item background
                        containerBorderColor: ListItemData.borderColor
                        containerBackgroundColor: containerItem.ListItem.selected ? ListItemData.backgroundColorSelected : ListItemData.backgroundColor
                    }
                }
            ]

            onTriggered: {
                var selectedItem = dataModel.data(indexPath);    
                toggleSelection(indexPath) // (solution 1)

                // Or you can use also 
                select(indexPath, (!isSelected(indexPath))) // (solution 2)
            }
        }

How can I deselect an item from ListView in cascade?

2 Answers2