Access item inside ListView via delegate

[Ratzz]

I was trying to access an item inside ListView via delegate in QML
Code is similar to the link with little modification which is shown below

1. I want to access the TextEdit and get/set value from it .
2. I want to hide/show button on click event ( When only one row is visible, hide the delete button )
   a) Step1: When the delete button from the row 2 is clicked
   b) Step2: Hide the delete button from row 1
3. Also little confused on how append work. https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html#append-method . How does empty dictionary add items. Can it be empty too?

I am using PyQt5 to launch the QML on Ubuntu 20.04, Qt 5.14.2

Code looks like

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 500
    height: 500

    Rectangle {
        width: 250
        height: 400
        Component {
            id: listDelegate
            Item {
                width: 250; height: 50

                Row {
                    Column {
                        width: 100
                        Button { text: "text"}
                    }
                    Column {
                        width: 50
                        TextEdit { text: "Edit"}
                    }
                    Column {
                        width: 100
                        Button {
                            text: "Add"
                            onClicked:{
                                listModel.append({"": ""})
                            }
                        }
                    }
                    Column {
                        width: 100
                        Button {
                            text: "Delete"
                            onClicked:{
                                if(listModel.count > 1)
                                    listModel.remove(index);
                            }
                        }
                    }
                }
            }
        }

        ListModel {
            id: listModel
            ListElement {
            }
        }

        ListView {
            id: listView
            anchors.fill: parent
            model: listModel
            delegate: listDelegate
            focus: true
        }
    }
}

[Ratzz]

I was able to access the TextEdit value using property value which is set to model via ListElement something like this

ListElement { editProperty: "Initial text" }

and on click event

 onClicked: { listModel.setProperty(index, "editProperty", editField.text) }

Still I am unable to access the delete Button . Does anyone know to access it?

[J.Hilk]

hi @Ratzz

you already "listen" to the listModel count property for your onClicked why don't you make the visible property depending on it as well ?

                  Column {
                        width: 100
                        Button {
                            text: "Delete"
                            visible: listModel.count > 1
                            onClicked:{
                                if(listModel.count > 1)
                                    listModel.remove(index);
                            }
                        }
                    }

[Ratzz]

@J-Hilk said in Access item inside ListView via delegate:

you already "listen" to the listModel count property for your onClicked why don't you make the visible property depending on it as well ?

It just worked :) Thank you @J-Hilk

[Ratzz]

@Ratzz said in Access item inside ListView via delegate:

I was able to access the TextEdit value using property value which is set to model via ListElement something like this

@J-Hilk , Is there any better way than this ?

[J.Hilk]

@Ratzz
for example, you could just bind the text directly:

                    Column {
                        width: 50
                        TextEdit { text: editableText}
                    }
...
...
     ListModel {
            id: listModel
            ListElement {
                    editableText: "SomeText"
            }
     }

[Ratzz]

That works as well

[Ratzz]

@J-Hilk
Now when I tried with empty text

ListModel {
            id: listModel
            ListElement {
                    editableText: ""
            }
     }

and then I tried to change the text field value manually say "sometext" . Button event returned null

onClicked: { 
listModel.get(0).editableText 
console.log(listModel.get(0).editableText ) //Null
}

while button event setting property gave proper result

onClicked: { 
listModel.setProperty(index, "editableText ", id.text)
console.log(listModel.get(0).editableText ) //"sometext"
}

[J.Hilk]

@Ratzz interesting

I usually have c++ based models, so my experience with QML models is limited 😕

Maybe someone else know more about this behavior

[Ratzz]

@J-Hilk
okay Fine.

[GrecKo]

@Ratzz said in Access item inside ListView via delegate:

listModel.get(0).editableText

What is that line supposed to do? You are not modifying anything here

onClicked: { 
    listModel.setProperty(index, "editableText ", textEdit.text)
}

just do that instead:

onClicked: editableText = textEdit.text

[Ratzz]

@GrecKo , Yes I can do that as well.

How can I get the updated text "editableText" as soon I change the value of TextEdit is changed?

[GrecKo]

@Ratzz console.log(editableText ), you have access to the role values (as context properties) corresponding to the model cell in the delegate

[Ratzz]

@GrecKo , I mean without the button, when I edit the values of TextEdit, I should be able to get the modified text. I tried via property. It always gave me empty