Change property of Dynamic Item in grid

[Diracsbracket]

@echo55
Can you show the code you have so far ?

[echo55]

Yes of course

this is where i create it

                 Grid {
                            id: grid
                            anchors.fill: parent
                            rows: 4
                            columns: 2
                            spacing: 50
                            flow: Grid.LeftToRight
                            Component.onCompleted: {
                                var c = Qt.createComponent("Bundle_content.qml")
                                var i = 0
                                Constants.users["user"]["bundles"].forEach(
                                            function (info) {
                                                var o = c.createObject(grid)
                                                o.width = 300
                                                o.height = 300
                                                o.text = info["title"]
                                                o.pic = info["image"]
                                                o.v = info["title"]
                                                o.index = i
                                                i = i + 1
                                            })
                            }
                        }

and this is the component :

Item {
    id: i
    width: 300
    height: 300
    property alias pic: image1.source
    property alias text: text1.text
    property int index: 0
    property var v: {

    }

    Rectangle {
        id: rectangle
        color: "#00000000"
        anchors.fill: parent

        Rectangle {
            id: rectangle1
            x: 315
            y: 212
            width: 247
            height: 217
            radius: 0
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: rectangle1.gradcolor1
                }

                GradientStop {
                    position: 1
                    color: rectangle1.gradcolor2
                }
            }
            border.color: "#00000000"
            anchors.leftMargin: 27
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            property color gradcolor1: "transparent"
            property color gradcolor2: "transparent"
            anchors.left: parent.left

            Rectangle {
                id: rectangle2
                color: "#ffffff"
                anchors.rightMargin: 10
                anchors.leftMargin: 10
                anchors.bottomMargin: 10
                anchors.topMargin: 10
                anchors.fill: parent
            }
            Image {
                id: image1
                anchors.rightMargin: 5
                anchors.leftMargin: 5
                anchors.bottomMargin: 5
                anchors.topMargin: 5
                fillMode: Image.PreserveAspectCrop
                property bool rounded: true
                property bool adapt: true
                anchors.fill: parent
                layer.enabled: rounded
            }
        }

        Text {
            id: text1
            x: 308
            y: 264
            width: 145
            height: 36
            text: qsTr("Error")
            font.bold: true
            anchors.horizontalCenterOffset: 1
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 25
            anchors.horizontalCenter: parent.horizontalCenter
        }
}

so i want to change gradcolor1 and 2 outside of the component (where the grid is ) but i can't access a particulary one .

[dheerendra]

Use the children property of item. e.g

for(var i=0;i<grid.children.length;i++){
      grid.chidren[i].color="blue"
}

MouseArea not required for every item of grid.

[echo55]

Alright great news,

I want it to be trigger when i click on of the Items, but it needs to access grid which isn't in the same file .
If i do a function and try to call it in the children it doesn't work (not recognized).

Here is an easy way to do that ?

Thank you.

[dheerendra]

What do you mean by not in same file ? Can you give me the sample code please ?

[echo55]

the two code i sent just up .

It's from two different files (.qml)
i use

Qt.createComponent("Bundle_content.qml")

to create in the current file a component from another file so Bundle_content.qml

[dheerendra]

Objects created from Button_Component.qml becomes child of Grid. Why do you want to access the parent grid inside the child objects ? Do you want to change something in grid ?

[echo55]

I want to change the variable color gradcolor1 and gradcolor2 from the grid .
but only when the mousearea of any of the children of grid is pressed.

[dheerendra]

Define the signal in your component. Emit the signal when you click. Catch the signal in main. Not a good idea to access the parent inside the child objects.

[echo55]

I tried to do that but the problem is that i want to change color of every component except the one clicked .
How can i send a signal saying to change color of all of it minus the one who emitted it .

[dheerendra]

OK. You can try something similar to the following. It is simple concept to show how you can work with object.

===== main.qml =========
import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    visible: true
    width: 440
    height: 480
    title: qsTr("Hello World")
    property var comp:null

    function changeColor(val){
        for(var i=0;i<grid.children.length;i++){
            var obj = grid.children[i];
            if (obj.val===val){
                continue;
            }else {
                obj.color = "blue"
            }
        }
    }

    Grid {
        id : grid
        spacing: 5
        anchors.fill: parent
        Component.onCompleted: {
            for (var i=0;i<12;i++){
                if (comp==null){
                    comp = Qt.createComponent("ChildElement.qml");
                }
                var obj = comp.createObject(grid)
                obj.changeEveryBody.connect(changeColor);
                obj.val = i;
            }
        }
    }
}
========= ChildElement.qml ===============
import QtQuick 2.0

Rectangle {
    width: 100;height: 100;color: "red"
    property int val:0
    signal changeEveryBody(int val);
    MouseArea{
        anchors.fill: parent
        onClicked: {
            changeEveryBody(val)
        }
    }
}

[echo55]

Thank you very much.
It worked.

[dheerendra]

cool. please move the case to solved state