TableView refresh after delete / update / insert row QML

[filipdns]

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

[LeLev]

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

[filipdns]

@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

[SGaist]

Hi,

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

[filipdns]

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

[LeLev]

@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()

        }
    }
}

[filipdns]

@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 ... ;-(

[SGaist]

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

[filipdns]

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

[filipdns]

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()