Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › Need help with CustomComboBox and setting dynamic model

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21380

    Flesh

    I want to populate a combobox from SQLite, i took the example from https://felgo.com/doc/qt/qml-qtquick-controls2-combobox/ and https://felgo.com/doc/felgo-appdemos-showcase-qml-controls-customcombobox-qml/ and combined them into one, and have no clue as to how to populate the text control:

    The Code

    import Felgo 3.0
    import QtQuick 2.5
    import QtQuick.Controls 2.0 as Quick2
    
    Quick2.ComboBox {
        id: comboBox
        implicitWidth: dp(90) + 20
        implicitHeight: dp(24) + topPadding + bottomPadding
        padding: dp(12)
        editable: true
        model: ListModel {
            id: model
        }
        onAccepted: {
            if (find(editText) === -1)
                model.append({text: editText})
        }
        // overwrite style for density independent sizes
        delegate: Quick2.ItemDelegate {
            width: comboBox.implicitWidth
            height: comboBox.implicitHeight
            padding: dp(12)
            contentItem: AppText {
                text: modelData
                color: highlighted ? Theme.tintColor : Theme.textColor
                wrapMode: Text.NoWrap
            }
            highlighted: comboBox.highlightedIndex == index
        }
    
        contentItem: AppText {
            leftPadding: 4
            text: comboBox.displayText
            width: comboBox.width - comboBox.indicator.width - comboBox.spacing
            wrapMode: Text.NoWrap
        }
    }
    

    The Database.js:

    function dbInit()
    {
        // Create the database if it doesn't already exist
        var db = LocalStorage.openDatabaseSync("MyDatabase", "1.0", "MyDatabase", 1000000);
        try {
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS test ([rowid] INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,Name TEXT,Description TEXT)');
            })
        } catch (err) {
            console.log("Error creating table in database: " + err);
        };
    }
    
    function dbGetHandle()
    {
        try {
            var db = LocalStorage.openDatabaseSync("MyDatabase", "1.0", "MyDatabase", 1000000)
        } catch (err) {
            console.log("Error opening database: " + err)
        }
        return db
    }
    
    function dbInsert(Name,Description)
    {
        var db = dbGetHandle()
        var rowid = 0;
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO test (Name,Description) VALUES(?, ?)',
                          [Name,Description])
            var result = tx.executeSql('SELECT last_insert_rowid()')
            rowid = result.insertId
        })
        return rowid;
    }
    
    function dbReadAll()
    {
        var db = dbGetHandle()
        db.transaction(function (tx) {
            var results = tx.executeSql(
                        'SELECT rowid,Name,Description FROM test order by rowid desc')
            for (var i = 0; i < results.rows.length; i++) {
                console.debug("id=" + results.rows.item(i).rowid + " Name: " + results.rows.item(i).Name)
                comboBoxDbQueries.model.append({
                                     id: results.rows.item(i).rowid,
                                     Name: results.rows.item(i).Name,
                                     Description: results.rows.item(i).Description
                                 })
            } // end for
        })
    }

    This is the part I am having issues with:

    contentItem: AppText {
    text: modelData

    without passing in a model modelData is undefined, if I pass it model, which is the id for the LIstModel, I get the error:

    Unable to assign QQmlDMAbstractItemModelData to QString

    I would have though it was model.data(index, role) not sure what role is, passing it 0 does not work, nor does model.get(index)

    text: model.get(index).attributes.get(1).value

    I get this error:

    TypeError: Property ‘get’ of object QQmlDMAbstractItemModelData(0x55555677d1c0) is not a function

    I was thinking that I want Name=1, Description=2, and ID is 0, but I can not even use the get function; seems like this is model.get(index).Name, does not work either.

    This totally confuses me since I can

    comboBoxDbQueries.model.append({

    use the the append function, I did check the database and 3 records are there, and I can see 3 blanks in the drop down, just no text.

    If there is a better way of doing this that works, please let me know, I have used this CustomComboBox, with list with no problem, but I have no idea how to append data to it in javascript without adding a ListModel.

    I thought about adding:

    could not figure out how to assign it to the comboBox as a model.

    ListModel {
       id: listModel
        Component.onCompleted: {
          Db.dbInit();
          Db.dbReadAll()
          comboBoxDbQueries.model = listModel;
       }
    }

    I get the error:

    ReferenceError: modelData is not defined in the CustomComboBox, and I have no idea where that reference comes from, I know its past as a <i>modelData</i> role, yet I can not assign the model this way, I also tried:

    CustomComboBox {
        id: comboBoxDbQueries
         model: listModel
    }

    I know the answer is simple, I just do not see it.

    Update: I did figure out why the drop down was not populating, if I changed modelData to Name it works, a hack, but the display does not work with: comboBox.displayText, its blank, how do I fix that, it does not get updated?

    Project zipped

    http://trinaryuniversity.org/temp/ComboBox.zip

    A Hack works:

    CustomComboBox {
        id: comboBoxDbQueries
        implicitWidth: dp(242) + 30
        onCurrentIndexChanged: {
           comboBoxDbQueries.displayText =  listModel.get(comboBoxDbQueries.currentIndex).Name;
        }
    }

    Getting closer; this is a version I used an onCurrentIndexChanged to update the displayText

    Does anyone have any idea how to get this to work, this is the key to making this not a hack, I need the runtime value for element 0=id or 1=Name, I guess, it crashes, so I have no clue, reflection is not working the way I think it should:

    listModel.get(comboBoxDbQueries.currentIndex).attributes.get(1).value

    I had to hard code the database column name, which is why I call it a hack, besides having to fix the current index, my guess is that I did not set this up correctly, so it’s a hack.

    http://trinaryuniversity.org/temp/ComboBoxHack.zip

    How can I do this the right way?

    Thanks for any help, I am stuck.

    #21381

    Flesh

    I forgot to add the reference https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html,

    in reference to this example:

    fruitModel.append(..., "attributes":
        [{"name":"spikes","value":"7mm"},
         {"name":"color","value":"green"}]);
    fruitModel.get(0).attributes.get(1).value; // == "green"

    I was thinking it would work like this:

    listModel.get(comboBoxDbQueries.currentIndex).attributes.get(0).name

    this is read in from a database, and does not have the structure as the example, so I was hoping name or value would actually give me the database field name, which in this case is Name, so I can only conclude that the database needs to add Attributes to its ListModal,

    its being defined as:

    Name: results.rows.item(i).Name,

    in the dbReadAll command, my guess this translates to

    {"name":"Name","value":"First"}]);

    internally, so my guess is that this should still work, but does not, grant you this is a Qt issue, its clear I am not using the command right for this data.

    Any idea what I am missing here?

    #21384

    Flesh
Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded