Repeater inside Repeater

[Pradeep P N]

Hi friends,

Im trying to create a Text and TextField combination of 1 Text and a Row of 4 TextFields bellow it. I want to creat only one text field and repeat it 4 times for 1 Text. And i want to create 3 instance of same repetor with diff Text and TextFields.

Can some one help me on this, and how can i have a Repeater inside a Repeater and can i pass more than one model and also more than one delegate to single Repeater.

Thanks.

[p3c0]

@Pradeep-P-N

how can i have a Repeater inside a Repeater

Just like any other nested items.

Repeater {
   id: parentrep
   model: 5
   delegate: parentdelegate
   Repeater {
      id: childrep
      model: 10
      delegate: childdelegate
   }
}

can i pass more than one model

No. Because as soon as you change the model it will reload.

more than one delegate to single Repeater.

Yes. Using Loader as delegate and change sourceComponent as per the conditions. The components will be the delegate items.

[th.thielemann]

I did this with a model and a method within this model to give me a submodel.
And so within the outer Repeater, I went through the model and for every item, I called the Repeater{ id: innerRepeater; model: outerRepeater.model.myMethod(index); ... }

[Quteroid]

@Pradeep-P-N said:

Im trying to create a Text and TextField combination of 1 Text and a Row of 4 TextFields bellow it. I want to creat only one text field and repeat it 4 times for 1 Text. And i want to create 3 instance of same repetor with diff Text and TextFields. Can some one help me on this,

This sounds a bit confusing to me. I think the following code snipplet matches your request: it creates three pairs of rows with different texts each. The first row in a pair consists of a Text, the second row of 4 TextFields, all sharing the same text. It uses two nested Repeaters: one for three row pairs and one for four TextFields within the lower row of a pair.

Column {
    Repeater {
        model: 3
        Column {
            Text {
                id: myText
                text: "Text " + (model.index + 1); }
            Row {
                Repeater {
                    model: 4
                    TextField {
                        text: myText.text } } } } } }

Note that this snipplet completely does without delegates. This is okay for simple or demonstration purposes like this one. For more complex Repeater contents you should define and assign delegates, nevertheless.

and how can i have a Repeater inside a Repeater

For instance, as above's example demonstrates.

and can i pass more than one model and also more than one delegate to single Repeater.

Not directly. These properties can store only single values. In case of model this is typically one list value (or, mostly for demonstration purposes, numbers as shown above). You cannot assign multiple list values to the model. Similar with delegate: this is one (arbitrarily complex) definition of how to visually deal with data from the model.

However, you can make both model and delegate arbitrarily complex. They do not need to be statically predefined and consist of the same one-dimensional items only. You can create a ListModel with mixed data records that matches a JavaScript array like this: [{textRecord: "Text"}, {numberRecord: 42}, {objectRecord: someObject}, {imageRecord: someImageData}] . Then it's up to you to design a delegate that can handle different record types like this appropriately. As p3c0 pointed out, Loader is one way to select between two (or a few) different predefined, static components. Creating one complex component that can display different types of data is another way.

The latter is likely best done in JavaScript (instead of plain QML). Not long ago I figured how to construct arbitrarily complex delegate components in JavaScript. It's not quite straightforward, since it requires callbacks. So it requires advanced JavaScript skills. See https://forum.qt.io/topic/53899/solved-how-to-create-delegates-and-listmodel-dynamically-in-javascript/6 for my solution.