QML GridLayout set columnSpan

[brianrrichter]

Hi,
Does somebody knows if it is possible to set columnSpan inside a gridView?

The following example is a 3 columns grid, and the first row should have only one item, since the width for that item is grid.cellWidth * 3

the commented code did not work.

I'm starting to work with qml.
Thanks in advance!

ListModel {
        id: panelsModel
        ListElement {
            name: "P1.qml"
            collspan: 3
            ecolor: "lightpink"
        }
        ListElement {
            name: "P2.qml"
            collspan: 1
            ecolor: "lightgreen"
        }
        ListElement {
            name: "P2.qml"
            collspan: 2
            ecolor: "orange"
        }
        ListElement {
            name: "P2.qml"
            collspan: 2
            ecolor: "yellow"
        }
        ListElement {
            name: "P2.qml"
            collspan: 2
            ecolor: "gray"
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        model: panelsModel
        cellHeight: 50
        cellWidth: width / 3

        delegate:
            Rectangle {
                height: grid.cellHeight
                width: grid.cellWidth * collspan
                color: ecolor
                /*Layout.columnSpan: collspan*/
            }
    }

[dheerendra]

You won't be able to add the Layout.columnSpan. You will be able to set the property to an item only if the items are placed in Layout. In your case, inside the delegate you not using any Layout. So this will not be able to set like this.

[brianrrichter]

Thanks,

You are saying that it is not possible because there is no layout inside the delegate.
I did not understand, should I add a layout in the delegate or it is not possible to set colspan in a GridView?

If possible, what adjustment should I make in the example?

[brianrrichter]

Solved this using GridLayout with Repeater:

GridLayout {
        id: grid
        columns: 3

        Repeater {
            model: panelsModel
            Rectangle {
                height: 50
                Layout.minimumWidth: parent.parent.width / 3 * collspan
                Layout.columnSpan: collspan
                color: ecolor
            }
        }

    }