[Gabor]

Hi,

Is there any way to add a scrollbar to a ComboBox popup? I have a 7000 record medications table in an SQLite database attached to the ComboBox popup. It takes forever to go down to the bottom of the list without a scrollbar.

Thank you for your help.

[AlexFelgo Team]

Hi,

The Combobox does not provide Scrollbar support by default. Here is an overview how you can customize the ComboBox.

For your usecase it probably is better to provide a custom component with an AppListView, which comes with a scrollbar by default. You can also use the SectionSelect for easier navigation in your list.

Best,

Alex from Felgo

[Gabor]

Thank you. It works.

[Gabor]

Hi Alex,

I have been trying to implement AppListView and SectionSelect for a while. I have the following code:

import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Database.js" as JS

App {
    Rectangle {
        id: bckgrnd

        ComboBox {
            id: myCombo
            height: 50
            width: 230
            x: 200
            y: 350

            //Reading list from db
            Component.onCompleted: {
                JS.dbGetWordList()
            }

            editable: true
            textRole: "wordField"


            currentIndex: 0

            model: ListModel {
                id: listModel
            }

            delegate: ItemDelegate {

                AppListView {
                    id: listView
                    Text {
                        font.pixelSize: 18
                        text: model.wordField
                    }
                    section.property: "section"
                }

                SectionSelect {
                    id: sectionSelect
                    anchors.right: parent.right
                    target: listView
                }
            }


        }
    }
}

When I run it it looks like this:

https://ibb.co/fYn2XVX

Where should I put the SectionSelect? How can I fix it (the alphabetical list appears in each row of the list).

Thank you for your help.

[AlexFelgo Team]

Hi,

please refer to the example at: https://felgo.com/doc/felgo-sectionselect/#example-usage

You did not provide a sectionProperty at the SectionSelect, this might be your issue.

Best,
Alex

[Gabor]

I made some changes like you recommended:

import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Database.js" as JS

App {
    Rectangle {
        id: bckgrnd

        ComboBox {
            id: myCombo
            height: 50
            width: 230
            x: 200
            y: 350

            //Reading list from db
//            Component.onCompleted: {
//                JS.dbGetWordList()
//            }

            editable: true
            textRole: "wordField"

            currentIndex: 0

            //            model: ListModel {
            //                id: listModel
            //            }
            model: {
                var model = []
                for (var i = 0; i < 26; i++) {
                    for (var j = 0; j < 5; j++) {
                        var entry = {
                            "text": String.fromCharCode(65 + i) + " " + j,
                            "section": "Section: " + String.fromCharCode(
                                           65 + i),
                            "letter"// for section display in list
                            : String.fromCharCode(
                                  65 + i) // only for SectionSelect, the actual sections all start with 'Section ...'
                        }
                        model.push(entry)
                    }
                }
                return model
            }

            //            delegate: ItemDelegate {
            //                width: myCombo.width
            //                height: myCombo.height

            //                AppListView {
            //                    id: listView

            //                    Text {
            //                        font.pixelSize: 18
            //                        text: model.wordField
            //                        color: "blue"
            //                    }
            //                }
            //            }
            //            popup: Popup {
            //                y: myCombo.height
            //                width: myCombo.width
            //                implicitHeight: Math.min(contentItem.implicitHeight, 300)
            //                padding: 0

            //                contentItem: ListView {
            //                    id: contentListView
            //                    clip: true
            //                    implicitHeight: contentHeight
            //                    model: myCombo.popup.visible ? myCombo.delegateModel : null

            //                    delegate: Text {
            //                        text: listModel.wordField
            //                    }

            //                    currentIndex: myCombo.highlightedIndex
            //                    section.property: "section"
            //                }
            //            }

            popup: Popup {
                y: myCombo.height
                width: myCombo.width
                implicitHeight: Math.min(contentItem.implicitHeight, 300)
                padding: 0

                ListView {
                    id: listView
                    delegate: SimpleRow {}

                    // activate sections
                    section.property: "section"

                    // add section select
                    SectionSelect {
                        id: sectionSelect
                        anchors.right: parent.right
                        target: listView
                        sectionProperty: "letter"
                    }
                }
            }
        }
    }
}

I copied the example into the combobox just to see whether it works or not. I get the following message:

 

qrc:/qml/VPlayApps/controls/SectionSelect.qml:150: TypeError: Cannot read property ‘count’ of undefined

When I click on the link it gives me the following error message: “Could not open qml/VPlayApps/controls/SectionSelect.qml for reading. Either the file does not exists or you do not have the permissions to open it.” I am not sure where this file is supposed to be, but my Felgo folder is read/write enabled. I am using Qt Creator 4.11.2, MSVC 2017 32 bit installed from the Felgo Maintenance Tool.

Am I missing some Felgo/Qt components? Thank you for your help.