QML ComboBox Witth CheckBox

Question

I Want to Design ComboBox(Dynamic) in Qml having checkbox in it. when i will check thecheckbox which is in combobox, i want to add a element in listview which under the combox. please help me with that

example image is attached below

ApplicationWindow {
    id: applicationWindow
    visible: true;
    width: screen.width;
    height: screen.height;




    ComboBox {
        id: comboBox
        width: parent.width
        height: parent.height/20
        anchors.left: parent.left
        anchors.right: parent.right

        anchors.leftMargin: 40
        anchors.rightMargin: 40
        anchors.top: parent.top
        anchors.topMargin: 10
        onCurrentIndexChanged: {
            var receivedData = {
                imageSource: "bulb",
                loadType: "Light",
                loadName: "▶BedRoom1",
                loadStatus: false,
                macId: "00:17:F1:00:00:B8_01",
            };
            var receivedData1 = {
                imageSource: "ac",
                loadType: "AC",
                loadName: "▶BedRoom21",
                loadStatus: true,
                macId: "00:17:F1:00:00:B8_02",
            };

            var receivedData2 = {
                imageSource: "dimmer",
                loadType: "Dimmer",
                loadName: "▶Hall1",
                loadStatus: false,
                macId: "00:17:F1:00:00:B8_03",
            };
            var receivedData3 = {
                imageSource: "fan",
                loadType: "Fan",
                loadName: "▶Hall1",
                loadStatus: false,
                macId: "00:17:F1:00:00:B8_04",
            };


            console.debug(combomodel.get(currentIndex).text)
            if(combomodel.get(currentIndex).text === "Light")
            {
                loadListView(receivedData)
            }
            else if(combomodel.get(currentIndex).text === "Bulb")
            {
                loadListView(receivedData)
            }
            else if(combomodel.get(currentIndex).text === "Ac")
            {
                loadListView(receivedData1)
            }
            else if(combomodel.get(currentIndex).text === "Dimmer")
            {
                loadListView(receivedData2)
            }
            else if(combomodel.get(currentIndex).text === "Fan")
            {
                loadListView(receivedData3)
            }

        }



        model: ListModel {
            id:combomodel
            ListElement {
                //text:"Select Device"
                name: ""
                checked: false
            }

        }
        function loadListView({imageSource,loadType,loadName,loadStatus,macId})
        {

            listmodel.append({"src": imageSource,"load":loadType,"label" : loadName,"checkedStatus" : loadStatus,"macStatus" :macId })
        }

        delegate: Item {
            width: parent.width
            implicitHeight: checkDelegate.implicitHeight

            CheckDelegate {
                id: checkDelegate
                width: parent.width
                text: model.name
                highlighted: comboBox.highlightedIndex === index
                checked: model.checked
                onCheckedChanged:
                {
                    model.checked = checked

                }

            }
        }


    }


    function appendData()
    {
        combomodel.append({ "name":"S" } )
        combomodel.append({ "name":"U" } )
        combomodel.append({ "name":"R" } )
        combomodel.append({ "name":"A" } )
        combomodel.append({ "name":"J" } )
        combomodel.append({ "name":"T" } )


    }

    Component.onCompleted: {
        getModuleTableData()
    }

    ListView {
        id:listview
        anchors.top: comboBox.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 5
        anchors.rightMargin: 5
        anchors.topMargin: 10
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        clip: true

        //delegate: deviceDelegate

        model: ListModel{
            id:listmodel
        }
        focus: true
        ScrollBar.vertical: ScrollBar {}
    }

    Dbadaptor{
        id:dbadaptor
    }
    function getModuleTableData()
    {
        console.log("In getModuleTableData() function")
        var data = dbadaptor.fetchModuleTable()
        console.log("Data: ",data)
        console.log("length",data.length)
        for(var i = 0; i< data.length;i++)
        {
            console.log("Name: ",data[i])
            //if(data[i] == "")
            combomodel.append({"name": '<b>'+data[i]+'</b>',"ckecked": ""})
            var dataload = dbadaptor.fetchLoadDataForGroup(i+1)
            console.log("loadData :",dataload)
            console.log("loaddatalength: ",dataload.length)
            for(var j = 0; j<dataload.length;j++)
            {
                combomodel.append({"name" : dataload[j],"checked": false})
            }
        }

    }
}

In above code i am appending data in ComboBox with checkbox,when i click on CheckBox,I want to print a debug Message. And in ComboBox where 8x1 device name is there i dont want to append checkBox with respect to it.

Answer 1

All you need to do is wrap the corresponding property as an object and append into the list model during the onCheckChanged slot of the checkbox. Here is a sample code that may help to achieve the above things.

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: applicationWindow
    visible: true;
    width: 640
    height: 480

    ComboBox {
        id: comboboxId
        width: parent.width / 2
        height: 50
        model: ListModel {
            ListElement { name: "One"; fill: "red"; ischecked: true }
            ListElement { name: "Two"; fill: "green"; ischecked: false }
            ListElement { name: "Three"; fill: "blue"; ischecked: false }
        }
        delegate: Item {
            width: parent.width
            height: 50
            Row {
                spacing: 5
                anchors.fill: parent
                anchors.margins: 5
                CheckBox {
                    id: checkboxId
                    height: parent.height
                    width: height
                    onPressed: checked = !checked
                    onCheckedChanged: {
                        if(checked)
                        {
                            listmodelId.append({ "name": name, "fill": fill })
                        }
                    }
                }
                Label {
                    text: name
                    width: parent.width - checkboxId.width
                    height: parent.height
                    verticalAlignment: Qt.AlignVCenter
                    horizontalAlignment: Qt.AlignHCenter
                }
            }
        }
    }

    ListModel {
        id: listmodelId
    }

    ListView {
        width: parent.width / 2
        height: parent.height
        anchors.left: comboboxId.right
        model: listmodelId
        delegate: Item {
            height: 50
            width: parent.width
            Rectangle {
                anchors.fill: parent
                color: fill
                Text {
                    anchors.centerIn: parent
                    text: name
                }
            }
        }
        onCountChanged: console.log(count)
    }
}