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

ODБOï

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

ODБOï

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

Qt World Summit: Submit your Presentation

TableView refresh after delete / update / insert row QML