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: 180
Registered: ‎12-09-2011
My Device: 9360, BB10
My Carrier: Aircel

Grouping in GridListView

Hi All,

 

I want to show the data in groups in the grid list. I am able to do the grouping in the ListView(StackLayout) but when i am doing the same using GridView only header appers but the data not apper.

 

I am pasting my code here.

Please provide any suggestion for this.

Thanks in Advance.

 

import bb.cascades 1.0
import "../containers"

Page {
    property variant photosData: app.getPhotosPath()
    property bool isPhotosVisible: cont_Photos.visible
    property bool isGridList: false
    Container {
        Container {
            leftPadding: 20
            rightPadding: 20
            Container {
                topPadding: 20
                id: cont_Photos
                visible: isPhotosVisible
                ListView {
                    id: gridListPhotos
                    visible: true
                    dataModel: GroupDataModel {
                        id: groupPhotoDataModel
                        grouping: ItemGrouping.None
                    }
                    layout: GridListLayout {
                        columnCount: 4
                    }
                    listItemComponents: [
                        ListItemComponent {
                            type: "header"
                            Header {
                                title: ListItemData
                            }
                        },
                        ListItemComponent {
                            type: "item"
                            ImageView {
                                imageSource: ListItemData.thumbnailPath
                            }
                        }
                    ]
                    onTriggered: {
                    }
                }
                ListView {
                    id: listViewPhotos
                    visible: false
                    dataModel: GroupDataModel {
                        id: listViewPhotoDataModel
                        grouping: ItemGrouping.None
                        //                        sortingKeys: [ "photoDate" ]
                    }
                    layout: StackListLayout {
                        orientation: LayoutOrientation.TopToBottom
                    }
                    listItemComponents: [
                        ListItemComponent {
                            type: "header"
                            Header {
                                title: ListItemData
                            }
                        },
                        ListItemComponent {
                            type: "item"
                            PhotosListCellContainer {
                                imagePath: ListItemData.thumbnailPath
                            }
                        }
                    ]
                    onTriggered: {
                    }
                }
            }
        }
    }
    onCreationCompleted: {
        gridListPhotos.dataModel.insertList(photosData.reverse());
        listViewPhotos.dataModel.insertList(photosData.reverse());
    }
    actions: [
        ActionItem {
            id: btnGridList
            title: "List View"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                if (! isGridList) {
                    isGridList = true;
                    btnGridList.title = "Grid View"
                    gridListPhotos.visible = false;
                    listViewPhotos.visible = true;
                } else {
                    isGridList = false;
                    btnGridList.title = "List View"
                    listViewPhotos.visible = false;
                    gridListPhotos.visible = true;
                }
            }
        },
        ActionItem {
            id: btnTimeLine
            title: "Group"
            ActionBar.placement: ActionBarPlacement.InOverflow
            onTriggered: {
                if (isGridList) {
                    listViewPhotos.dataModel.grouping = ItemGrouping.ByFullValue
                    listViewPhotos.dataModel.sortingKeys = [ "photoDate" ];
                } else {
                    gridListPhotos.dataModel.grouping = ItemGrouping.ByFullValue
                    gridListPhotos.dataModel.sortingKeys = [ "photoDate" ];
                }
            }
        }
    ]
}

 

Contributor
Posts: 33
Registered: ‎01-13-2013
My Device: BlackBerry Z10, Q10
My Carrier: Claro (Brazil)

Re: Grouping in GridListView

If you show want to the data in groups why are you setting groping to None in your data models?
Developer
Posts: 180
Registered: ‎12-09-2011
My Device: 9360, BB10
My Carrier: Aircel

Re: Grouping in GridListView

I am setting grouping None in my data model because at the starting I don't want to show the data in the form of groups.

I want to show the data in the form of group on clicking of my action item button "Group".

 

Please see the code for the above: 

 

This code is working for the List layout Stack but not working for Grid List Layout.

Please provide any suggestion.

 

ActionItem {
            id: btnTimeLine
            title: "Group"
            ActionBar.placement: ActionBarPlacement.InOverflow
            onTriggered: {
                if (isGridList) {
                    listViewPhotos.dataModel.grouping = ItemGrouping.ByFullValue
                    listViewPhotos.dataModel.sortingKeys = [ "photoDate" ];
                } else {
                    gridListPhotos.dataModel.grouping = ItemGrouping.ByFullValue
                    gridListPhotos.dataModel.sortingKeys = [ "photoDate" ];
                }
            }
        }