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
Posts: 230
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings
Accepted Solution

Change listview from grid to list dynamically

Dear developers

 

I have a listview that is shown as a grid. But I want a menuaction to change the grid to list and vice versa. But it seems harder then I thought. My griditems are different then my listitems. So those need to change as well.

 

This is what I have so far but I'm stuck to be honest.

 

import bb.cascades 1.0

Container {
    property bool isGrid: true
    
    ListView {
        id: listView
        dataModel: channelListVM.otherDataModel
        horizontalAlignment: HorizontalAlignment.Fill
        layoutProperties: StackLayoutProperties {
            spaceQuota: 1.0
        }
        layout: isGrid ? gridLayout : stackLayout
        listItemComponents: [
            ListItemComponent {
                type: "gridItem"
                GridItem {
                    contextActions: ActionSet {
                        title: ListItemData.name
                        actions: [
                            ActionItem {
                                title: qsTr("Favorite")
                                imageSource: "asset:///img/bb_action_favorites.png"
                                onTriggered: {
                                    ListItemData.favorite()
                                }
                            }
                        ]
                    }
                }
            },
            ListItemComponent {
                type: "listItem"
                MyListItem {
                    contextActions: ActionSet {
                        title: ListItemData.name
                        actions: [
                            ActionItem {
                                title: qsTr("Favorite")
                                imageSource: "asset:///img/bb_action_favorites.png"
                                onTriggered: {
                                    ListItemData.favorite()
                                }
                            }
                        ]
                    }
                }
            }
        ]

        function itemType(data, indexPath) {
            if(isGrid) {
                return "gridItem";
            }
            
            return "listItem";
        }

        attachedObjects: [
            StackListLayout {
                id: stackLayout
            },
            GridListLayout {
                id: gridLayout
                columnCount: 3
                horizontalCellSpacing: 10.0
                verticalCellSpacing: 10.0
                cellAspectRatio: 1
            }
        ]
    }
}

 And when I change the isGrid to true or false, he changes the layout but it seems that the UI is not updated. How can I fix this without working with 2 ListViews and hiding/showing them regarding the property?

 

Thanks in advance

______________________________________________________
BB10-OAuth: GitHub
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Change listview from grid to list dynamically

You wouldn't need to hide/show just use one of the dynamic QML options available.

 

http://developer.blackberry.com/native/documentation/cascades/best_practices/dynamic_qml/

 

From a coding point of view much cleaner and memory conscious.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 230
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings

Re: Change listview from grid to list dynamically

Thanks for the information. But that does not answer my question.

 

When I change from GridListLayout to StackListLayout, the UI of the ListView does not seem to get updated correctly. If even this small example does not work, then I don't care about dynamic QML options. Or can they do what I want?

______________________________________________________
BB10-OAuth: GitHub
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Change listview from grid to list dynamically

Unless your underlying dataModel changes the items are not going to change.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Retired
Posts: 8
Registered: ‎08-22-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: Change listview from grid to list dynamically

[ Edited ]

Since you are using the itemType function you do not require a change in your Database. However, since you pair layout to your item type choice, you will need to notify the ListView that its cache is no longer valid. Otherwise the ListView will not revisit item type selection until it needs to load a new item into its cache.

 

In order to do this you need to just have your DataModel emit a signal after you change your isGrid property. This is done via DataModel::itemsChanged. Since you want your entire list to rebuild you will want to give it the DataModelChangeType::Init.

 

Code wise you need to add this call:

 

channelListVM.otherDataModel.itemsChanged(DataModelChangeType.Init)
Jonathan Ross
BlackBerry Software Developer
Cascades Field Agency
Developer
Posts: 230
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings

Re: Change listview from grid to list dynamically

Thanks very much, works like a charm!

Is their another way of doing this without using the itemtype? As said before, I don't want to create 2 different ListViews and hide/show them as the user chooses grid or list.
______________________________________________________
BB10-OAuth: GitHub
Retired
Posts: 8
Registered: ‎08-22-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: Change listview from grid to list dynamically

This soluton allows you to not have to create two ListViews.

 

If you do not want to have to rely on itemTypes, then you are best creating a single ListItemComponent that is able to adapt its layout between both grid and stack.

 

The exact implementation of this would be dependant on what information you wish to display in both modes.

Jonathan Ross
BlackBerry Software Developer
Cascades Field Agency
Contributor
Posts: 10
Registered: ‎03-03-2013
My Device: 8800
My Carrier: viettel

Re: Change listview from grid to list dynamically

layout: GridListLayout {
columnCount: 3

}
columnCount: 3 - grid list
columnCount: 1 - list