Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. TableView refresh after delete / update / insert row QML
Forum Updated to NodeBB v4.3 + New Features

TableView refresh after delete / update / insert row QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
10 Posts 3 Posters 6.6k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    filipdns
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

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

      F 1 Reply Last reply
      0
      • ODБOïO ODБOï

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

        F Offline
        F Offline
        filipdns
        wrote on last edited by filipdns
        #3

        @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

        ODБOïO 1 Reply Last reply
        0
        • SGaistS Offline
          SGaistS Offline
          SGaist
          Lifetime Qt Champion
          wrote on last edited by
          #4

          Hi,

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

          Interested in AI ? www.idiap.ch
          Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

          1 Reply Last reply
          0
          • F Offline
            F Offline
            filipdns
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • F 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

              ODБOïO Offline
              ODБOïO Offline
              ODБOï
              wrote on last edited by ODБOï
              #6

              @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()
              
                      }
                  }
              }
              
              
              
              F 1 Reply Last reply
              0
              • ODБOïO 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()
                
                        }
                    }
                }
                
                
                
                F Offline
                F Offline
                filipdns
                wrote on last edited by filipdns
                #7

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

                1 Reply Last reply
                0
                • SGaistS Offline
                  SGaistS Offline
                  SGaist
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

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

                  Interested in AI ? www.idiap.ch
                  Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                  F 1 Reply Last reply
                  0
                  • SGaistS SGaist

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

                    F Offline
                    F Offline
                    filipdns
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • F Offline
                      F Offline
                      filipdns
                      wrote on last edited by
                      #10

                      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()
                      
                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved