how to enter nested Repeter's items properly

[shokarta]

Hello,

basicaly i have repeater inside another repater,
and outside i need to walk though all delegated Rectangles and give it a background color.

Tho, I dont know exactly how to access them from outside, i tried several stuff but not worked:

Window {

    property int numberIdClicked
    onNumberIdClickedChanged: {
        console.log(numberIdClicked);
        for (var i = 0; i < 9; i++) {
            for (var j = 0; j < 9; j++) {
                rep1.itemAt(i).children[0].children[j].color = "red"; // ReferenceError: rep1 is not defined
            }
        }
    }


    Rectangle {
        id: mainRect

        // Main Rectangles
        GridLayout {

            Loader {
                id: gridLoader
                sourceComponent: loaderComponent
                active: false

                Component {
                    id: loaderComponent

                    GridLayout {

                        Repeater {
                            id: rep1
                            model: 9

                            Rectangle {
                                id: mainGrid

                                GridLayout {

                                    Repeater {
                                        id: rep2
										property int rep2Index: index
                                        model: 9

                                        delegate: Rectangle {

                                            MouseArea {
                                                onClicked: {
                                                    if (gridValue[(rep2.rep2Index)*9+(index)]['visible'] === false) {
                                                        if (numberIdClicked === (rep2.rep2Index)*9+(index)+1) {
                                                            numberIdClicked = 0;
                                                        }
                                                        else {
                                                            numberIdClicked = (rep2.rep2Index)*9+(index)+1;
                                                        }
                                                    }
                                                }
                                            }   // MouseArea

                                        }   // Rectangle (test3)

                                    }   //Repeater (rep2)

                                }   // GridLayout

                            }
                        }   // Rectangle (mainGrid)

                    }   // GridLayout
                }   // Component (loaderComponent)

            }   // Loader (gridLoader)
        }   // GridLayout
    }   // Rectangle (mainRect)
}	// Window

[GrecKo]

@shokarta Don't.

Make your delegates react to your data. Don't modify them manually.

In your example, I don't know what's numberIdClicked purpose but you can have a property in your Window (or somewhere else) and just bind to it in your delegates.

Window {
    id: yourWindowId
    property color rectangleColor: "white"
    onNumberIdClickedChanged: rectangleColor = "red"
    delegate: Rectangle {
        color: yourWindowId.rectangleColor
        // ...

TBH your code seems needlessly complicated, have you considered using a model and a TableView Maybe

[shokarta]

@GrecKo thank you for great input.

i know its complicated, but because of the functions i still believe this is much better then TableView, tho lets not discusse this now :)

I am more looking for this solution:
https://stackoverflow.com/questions/33564849/how-to-access-nested-repeaters-in-qml
which I can not addapt to my usecase.

Do you think this might work for me too?
For my reasons of what the program does, this is the way i need to access it unfortunately.

Thank you for your great support!

[shokarta]

so these solutions are not nice, but they work:

for (var i = 0; i < 9; i++) {
    for (var j = 0; j < 9; j++) {
        console.log(i + " / " + j + " " + mainRect.children[0].children[0].children[0].children[i].children[0].children[j].color);
        console.log(i + " / " + j + " " + gridLoader.children[0].children[i].children[0].children[j].color);
    }
}