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
Highlighted
Developer
Posts: 134
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel
Accepted Solution

How can I place a listview inside another listview?

Hello everybody.

 

I'm making an app to my website and I'd like to have a Featured area inside it, but I found a big issue when I try to add the featured area to the Main Listview (Where the posts is loaded).

 

This is an example of what it would like to see inside my app:

 

sample.png

So, I want to move the "Featured area" and "Feeds Area" in the same time when the user tries to scroll the screen vertically.

 

I've tried using a ScrollView but the scroll priority is in the vertical listview and the featured area does scroll only when the vertical listview scroll has finished.

 

Someone could give me a suggestion?

 

Cheers!

BlackBerry Development Advisor
Posts: 15,506
Registered: ‎07-09-2008
My Device: BlackBerry PRIV
My Carrier: Bell

Re: How can I place a listview inside another listview?

You can place a ListView inside another ListView.  You could create a LeftToRight ListView that you embed in the main vertical Listview.  ScrollView inside a ListView should be avoided.

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 134
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel

Re: How can I place a listview inside another listview?

Could you give me a sample?

I don't know how to embed a list view inside another list view that is using a data source.

Thanks advanced
BlackBerry Development Advisor
Posts: 15,506
Registered: ‎07-09-2008
My Device: BlackBerry PRIV
My Carrier: Bell

Re: How can I place a listview inside another listview?

I don't think we have an example that does exactly what you want, but basically you could create a CustomListItem  contains the inner ListView.  You'd need a second DataSource for the inner ListView, or have the first item in your main DataSource be another DataSource.

 

The main ListView could choose the ListItem to display based on an item type set in the main DataSource or you could base it on the position. forumThreadList.qml shows how you can override the itemType method to select the type of item (if it's not defined in the original DataSource).  That example also shows how to use a CustomListItem, but not one that contains a ListView.

 

Here's another example that shows part of the implementation.  This one would have a horizontal ListView in every row of the main ListView.  If you combine these two you should be able to get what you're looking for.  Let me know if you have any questions along the way.

 

import bb.cascades 1.2

// creates one page with a label
Page {
    attachedObjects: [
        //ComponentDefinition doesn't work because DataModel doesn't extend BaseObject
        ArrayDataModel {
            id: dm2
        },
        ArrayDataModel {
            id: dm3
        }
    ]
    Container {
        ListView {
            dataModel: ArrayDataModel {
                id: dm
            }
            listItemComponents: [
                ListItemComponent {
                    Container {
                        layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                        }
                        ListView {
                            preferredHeight: 100
                            //Thankfully the QVariant is a DataModel, so this works :)
                            dataModel: ListItemData
                            layout: StackListLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            listItemComponents: [
                                ListItemComponent {
                                    Container {
                                        layout: StackLayout {
                                            orientation: LayoutOrientation.LeftToRight
                                        }
                                        Label{
                                            text: ListItemData +"\t|\t"
                                        }
                                    }
                                }
                            ]
                        }
                        Divider {}
                    }
                }
            ]
        }
    }
    onCreationCompleted: {
        dm2.append(["This is","another list","inside of","the first one"])
        dm3.append(["<( \" <) <( \" <) <( \" <)","(^\"^) (^\"^) (^\"^)","(> \" )> (> \" )> (> \" )>","(^\"^) (^\"^) (^\"^)","(> \" )><( \" )><( \" <)","(^\"^) (^\"^) (^\"^)","<( \" <) (>\"<) (> \" )>","(v' 'v) (v' 'v) (v' 'v)"])
        
        dm.append(dm2)
        dm.append(dm3)
    }
}

 

 

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 134
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel

Re: How can I place a listview inside another listview?

Thanks MSohm It worked fine!