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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support