TableView refresh after delete / update / insert row QML



  • Hello,

    I'm using TableView on my QML form with SQLite db and all is working fine but when I delete Row or Update one, I have to exit the QML page and back to it to see the change. Same for insertion, When I insert a new Row, it's insert on row 0 and not following the "order by" from the sql query

    How can I have an automatic update?

    Thank you for your help

    Philippe



  • Hello,
    one way do that is using Loader Type : https://doc-snapshots.qt.io/qt5-dev/qml-qtquick-loader.html
    LA



  • @LeLev Hello LeLev, thank you very much.

    I read what qt doc say about Loader but I don't really understand how to use it.

    My TableView id is ListView, could you shortly explain me what I have to do with it?

    and how can I call the loader with onClicked?

    Thank you for your help

    Philippe


  • Lifetime Qt Champion

    Hi,

    You should show the code you are using with your database and TableView.



  • My code is too long to post it, I give the link for the complete project. I still have to work on it but all database and tableView code are there ;-)

    the concerned form is the flightlog.qml, thank you for your help !

    https://drive.google.com/open?id=193IHlBvDuOa4Zrk8DNjvq_9jwPyZb2_b



  • @filipdns
    //GardePage.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.3
    import QtQuick.Dialogs 1.0
    
    Page {
        id: root
        property string filename
        background: Rectangle {
                color: "black"
            }
        function resetSourceComp(){
            //// loaderLeft.update() //
    
            loaderLeft.sourceComponent = leftColumnComponent// reseting source
        }
    Loader{// loader for left column list
        id:loaderLeft
        width: parent.width / 2
        height: parent.height
        anchors.left: parent.left
        sourceComponent: leftColumnComponent
        onSourceComponentChanged:resetSourceComp() //sourceComponent = leftColumnComponent//
    }
    Component{ //wrap the list into Component so we can load it with loader
        id:leftColumnComponent
        ColumnLayout{
    
           // width: parent.width / 2   // move positioning into loader
          //  height: parent.height
          //  anchors.left: parent.left
            ListView {
                id: listView
                anchors.fill: parent
                topMargin: 10
                leftMargin: 10
                bottomMargin: 10
                rightMargin: 5
                spacing: 20
                model: ["F-GALN", "F-GALP"]
                delegate: ItemDelegate {
                width: avatar.implicitWidth
                height: avatar.implicitHeight
                leftPadding: avatar.implicitWidth
                onClicked: stackView.push("qrc:/presentation.qml", { inConversationWith: modelData })
                    Image {
                    id: avatar
                    source: "qrc:/images/" + modelData.replace(" ", "_") + ".png"
                    }
                }
            }
        }
    }
    Loader{
        width: parent.width / 2
                height: parent.height
                anchors.right: parent.right
        sourceComponent: rightColumn
    }
    Component{
        id:rightColumn
        ColumnLayout{
    
    
            ListView {
                id: listView2
                anchors.fill: parent
                topMargin: 10
                leftMargin: 10
                bottomMargin: 10
                rightMargin: 5
                spacing: 20
                model: ["F-GMGB","F-GMLT"]
                delegate: ItemDelegate {
                width: avatar2.implicitWidth
                height: avatar2.implicitHeight
                rightPadding: avatar2.implicitWidth
                onClicked: stackView.push("qrc:/presentation.qml", { inConversationWith: modelData })
                    Image {
                    id: avatar2
                    source: "qrc:/images/" + modelData.replace(" ", "_") + ".png"
                    }
                }
            }
        }
    }
        Button {
            id: dialogButton
            text: "new"
    
            onClicked: {
                fileDialog.open()
            }
        }
        function basename(str)
        {
            return (str.slice(str.lastIndexOf("/")+1))
    
        }
        FileDialog {
            id: fileDialog
            title: "Please choose a file"
            folder: shortcuts.home
            nameFilters: [ "Image files (*.png)"]
            onAccepted: {
    
                var res1 = basename(fileUrl.toString())
                var res2 = res1.split(".")
                var filename = res2[0];
                console.log(filename + "ok")
                loaderLeft.sourceComponent = null //  "onSourceComponentChanged: resetSourceComp()" 
                fileDialog.close()
    
            }
        }
    }
    
    
    


  • @LeLev Thank you very much to had take time for me!!!

    I try to use your example on my flightlog.qml but after includingthe tableview in component, I got message listview and listModel missing ... ;-(


  • Lifetime Qt Champion

    I'd recommend simplifying things a bit first. You have several objects with listViewas id and some of them are definitely not ListViewinstance.



  • @SGaist Hello SGaist, several? I have only my TableView or ListView with this id and nothing else and only one time for each qml page.

    TableView with this id can create problem?



  • Hello, I found how to do it.

    onClicked save button: listView.model.clear() + sqlitequery of the tableview.
    here example:

    the tableView:

    TableView {
            id: listView
            width: parent.width
            visible: true
            anchors.top: input.bottom
            height:Screen.height/8
            model: ListModel {
                id: listModel
                Component.onCompleted: {
    
                    JS.dbimmat()
                }
            }
            TableViewColumn {role: "date_etape";title:"Date du vol";width: 70}
            TableViewColumn {role: "pilot1";title: "Pilote 1";width: 70}
            TableViewColumn {role: "pilot2";title: "Pilote 2";width: 70}
            TableViewColumn {role: "pilot3";title: "Pilote 3";width: 70}
            TableViewColumn {role: "photo1";title: "Photo 1";width: 70}
            TableViewColumn {role: "photo2";title: "Photo 2";width: 70}
            TableViewColumn {role: "photo3";title: "Photo 3";width: 70}
    }
    

    include at the end of your "save button" code:

    listView.model.clear()
    JS.dbimmat()
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.