Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Access item inside ListView via delegate



  • 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

    alt text

    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
            }
        }
    }
    
    


  • 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?


  • Moderators

    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);
                                }
                            }
                        }
    


  • @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 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 ?


  • Moderators

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

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


  • That works as well



  • @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"
    }

  • Moderators

    @Ratzz interesting

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

    Maybe someone else know more about this behavior



  • @J-Hilk
    okay Fine.


  • Qt Champions 2018

    @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
    


  • @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?


  • Qt Champions 2018

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



  • @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