Chilarai
Chilarai

Reputation: 1888

Dynamically add more combobox without resetting exiting data

I am looking to dynamically add more Combobox to my view. The code works fine and adds a new Combobox on the click of the button.

However, when I add a new Combobox, the data in existing Comboboxes are reset to default. How do I just append another Combobox without resetting the earlier selected values. I will prefer not to save the existing values in some variable

Here is my code

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Page {

    id : somepageid
    property int modelList: 0
    property int counter: 0

    // Combobox Listmodel
    ListModel{
        id: listmodel

        ListElement{
            elem: "A"
        }
        ListElement{
            elem: "B"
        }
        ListElement{
            elem: "C"
        }
    }

    // Add more item to Listview
    function addMore(){
        if(counter < listmodel.count){
            counter++
            modelList++
            listid.model = modelList
        }
    }

    // Button
    Button{
        id: testButton
        text: "Click to add Combobox"
        onClicked: {
            addMore()
        }
    }

    // Listview
    ListView{
        id: listid
        model: modelList
        anchors.top:  testButton.bottom
        height: listid.model * 40

        delegate: Row{
            ComboBox{
                id: combo
                textRole: "elem"
                model:listmodel
            }
        }
    }
}

Upvotes: 1

Views: 100

Answers (1)

luffy
luffy

Reputation: 2388

The problem is you are resetting the ListView each time you do a listid.model = modelList. You need to have a fixed model for your listview and do the changes there.

An example (applied to your code) could look like this:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Page {

    id : somepageid
    property int counter: 0

    // ListView model
    ListModel{
        id: listmodel
    }

    // Add more item to Listview
    function addMore(){
        if(counter < 3){
            counter++
            listmodel.append({elements: [{elem: "A"}, {elem: "B"}, {elem: "C"}]})
        }
    }

    // Button
    Button{
        id: testButton
        text: "Click to add Combobox"
        onClicked: {
            addMore()
        }
    }

    // Listview
    ListView{
        id: listid
        model: listmodel
        anchors.top:  testButton.bottom
        height: listid.model.count * 40

        delegate: Row{
            ComboBox{
                id: combo
                textRole: "elem"
                model: elements
            }
        }
    }
}

Upvotes: 2

Related Questions