Forums

OverviewFelgo 2 Support (Qt 5) › Scrollbar in ComboBox popup

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23693

    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.

    #23694

    Alex
    Felgo 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

    #23696

    Gabor

    Thank you. It works.

    #23716

    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.

    #23726

    Alex
    Felgo Team
    #23727

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

RSS feed for this thread

You must be logged in to reply to this topic.