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
Developer
mapleleafs90
Posts: 374
Registered: ‎02-12-2011
My Device: Bold 9780

Listview Highlight Selected Index

I have a listview using a custom datamodel and am having difficulty highlighting or marking the selected index in some way.

 

In my listview if I identify the type as an item then I can select the items fine and they are highlighted in blue once clicked

 

listItemComponents: [
                        ListItemComponent {
                            type: "item"
                            Container {
...

 But when I do this none of the components inside the container are drawn (all the information from my data model).

 

When I remove the type: "item" then all my data in the container is now drawn properly however if I try to select any items nothing happens (no highlighting and no selected index)

 

I tried adding  in the listview but didn't have any effect

 

onTriggered: {
                        clearSelection();
                        select(indexPath, true);
                    }

 

Please use plain text.
Developer
mapleleafs90
Posts: 374
Registered: ‎02-12-2011
My Device: Bold 9780

Re: Listview Highlight Selected Index

Maybe I don't need to highlight it, but I wouldn't mind changing the text color of a label inside the listitemcomponent container or something like that, but still is that even possible?
Please use plain text.
Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: Listview Highlight Selected Index

It's possible, but you need to implement the highlighting yourself, based on the selection state of the listItem. Your custom listitem needs to implement the ListItemListener interface so that it knows what the selection state is, otherwise the selection logic won't work (you might also need to inherit from bb::cascades::CustomControl),

The ListView is expecting to be able to call functions such as select(), active(), reset() on your listitem. You could try defining these as functions in your outer container:


i.e. ListItemComponent {
type "item"
Container {

property bool selected;
property bool activated;
function select(sel) {
selected = sel;
}
function activate(act) {
activated = act;
}
}

I have no idea if that will work or not. The ListItemListener class is a C++ class that is designed to be used by a custom control defined in C++. The 'normal' approach is to define your custom listitem purely in C++ and then make that accessible to QML
Please use plain text.
Developer
Shashadhar
Posts: 18
Registered: ‎04-09-2013
My Device: Z10

Re: Listview Highlight Selected Index

We can do something like that which highlight your container on selection...

 

content: Container {
        layout: DockLayout {
        }
        ListView {
            property variant nIndex
            id: listView
            objectName: "listView"
            horizontalAlignment: HorizontalAlignment.Center
            dataModel: MyListModel {
                id: myListModel
            }
            listItemComponents: [
                ListItemComponent {
                    Container {
                        layout: DockLayout {
                        }
                        preferredWidth: 768
                        preferredHeight: 70
                        background: Color.create("#000000")
                        Container {
                            layout: DockLayout {
                            }
                            preferredWidth: 768
                            preferredHeight: 60
                            background: Color.create("#ffffff")
                            id: highlightContainer
                            Label {
                                text: ListItemData.text
                            }
                        }
                        ListItem.onSelectionChanged: {
                            if (selected) {
                                highlightContainer.background = Color.create("#75b5d3");
                            } else {
                                highlightContainer.background = Color.create("#ffffff");
                            }
                        }
                    }
                }
            ]
            onTriggered: {
                listView.select(indexPath, true);
                listView.select(nIndex, false);
                nIndex = indexPath;
            }
        }
    }

Hope it helps.
Please use plain text.
BlackBerry Development Advisor
sabdelsayed
Posts: 249
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10

Re: Listview Highlight Selected Index

Hi mapleleafs90, starting the 10.2 SDK you can use the new CustomListItem API for your list items. The API has a property called highlightAppearance, which allows you to specify a highlighting behavior (full or frame) for your list items on active, select and longpress.

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker
Please use plain text.
Contributor
danguito
Posts: 17
Registered: ‎09-05-2012
My Device: 9780 Bold

Re: Listview Highlight Selected Index

Is highlightAppearance availaible for ListItemListener in C++?

Please use plain text.
BlackBerry Development Advisor
sabdelsayed
Posts: 249
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10

Re: Listview Highlight Selected Index

[ Edited ]

Currenly HighlightAppearance is only relevant to the CustomListItem API.

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker
Please use plain text.