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

Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Image not loaded in ListView which uses grid list layout

I have a QML file named "home.qml" with listView containing an image and two labels. I am using GroupDataModel as dataSource in the listView. This GroupDataModel is created from a main qml class.




      In the dataModel I have 9 elements. In the listView the two labels are displayed correctly. The image I want to show in the list has been downloaded and saved in the sandbox.


My isssue is:


  I am not able to load the image in the listView. 


What I have tried:


 1)  Instead of setting the defaultImageSource from the ListItemData I have tried giving a direct path. At that time image appears but not in all cells(I am having 9 cells,Image didnt appear for first 4 cells)

2) I have logged the image path that is absolutly correct.


  Home.qml  (Where I have the ListView)

import bb.cascades 1.0
import bb.data 1.0
import du.image.slider 1.0

Page {
    id: homeListPage
    property variant datamodel
    property variant adData
    signal myAccountPressed
    signal usagePressed
    signal manageServicePressed
    signal appsfromDuPressed
    signal videoTutorialPressed
    signal howtoDuPressed
    signal reportProblemPressed
    signal findusPressed
    onDatamodelChanged: {
        homeList.dataModel = datamodel;

    onAdDataChanged: {
        adroll.sliderData = adData;

    ScrollView {
        Container {
            id: mainContainer
            preferredHeight: 2150
            TopBar {
                titleTextVisible: false
                backVisible: false
            ImageSlider {
                id: adroll
                preferredHeight: 500
                preferredWidth: 768
                bottomMargin: 10.0
            Container {
                id: itemsContainer
                background: Color.White
                ListView {
                    id: homeList
                    objectName: "homeList"
                    layout: GridListLayout {
                        columnCount: 2
                        cellAspectRatio: 1.0
                        horizontalCellSpacing: 12
                        verticalCellSpacing: 12
                    listItemComponents: [
                        ListItemComponent {
                            type: "item"
                            id: tileList
                            Container {
                                id: listItemContainer
                                layout: AbsoluteLayout {
                                ImageButton {
                                    defaultImageSource: listItemContainer.ListItem.view.getPath(ListItemData.imagePath)
                                    verticalAlignment: VerticalAlignment.Top
                                    horizontalAlignment: HorizontalAlignment.Left
                                Container {
                                    layout: AbsoluteLayout {
                                    Label {
                                        text: ListItemData.title
                                        preferredWidth: 343
                                        layoutProperties: AbsoluteLayoutProperties {
                                            positionX: 30
                                            positionY: 10
                                        textStyle.color: Color.Green
                                        //textStyle.color: Color.create(ListItemData.titleColor)
                                        multiline: true
                                        textStyle.fontWeight: FontWeight.Bold
                                        textStyle.fontSize: FontSize.Large

                                    Label {
                                        text: ListItemData.shortDesc
                                        preferredWidth: 343
                                        layoutProperties: AbsoluteLayoutProperties {
                                            positionX: 30
                                            positionY: 180
                                        multiline: true
                                        textStyle.color: Color.Blue
                                        //textStyle.color: Color.create(ListItemData.shortDescColor)
                                        textStyle.fontSize: FontSize.Small
                                } //container
                            } //container
                        } //list component
                    ] // listItemComponents
                    function getPath(relativepath) 
                        console.log(dirPaths.pathPrefix + relativepath);
                        return dirPaths.pathPrefix + relativepath;
                    onTriggered: {
                        if (indexPath == 0)
                        else if (indexPath == 1)
                        else if (indexPath == 2)
                        else if (indexPath == 3)
                        else if (indexPath == 4)
                        else if (indexPath == 5)
                        else if (indexPath == 6)
                        else if (indexPath == 7)
                    scrollIndicatorMode: ScrollIndicatorMode.None
                } //list view
            } //Item container
        } //main container
    } //scroll view

  I tried a lot. I am eagerly waiting for your help 


Posts: 161
Registered: ‎01-03-2013
My Device: n/a
My Carrier: n/a

Re: Image not loaded in ListView which uses grid list layout

Have you checked  the methods getPath and imagePath return url paths properly?


If my answer has been useful to you, please, click the button