using scrollview in tableview qml



  • Insert Table within the scroll, I do it because I can I change the color and scroll Position
    please guide me.

        ScrollView
        {
            width: tbl.width
            height: tbl.height
            anchors.fill: tbl
            
            style: ScrollViewStyle {
                handle: Item {
                    implicitWidth: 14
                    implicitHeight: 26
                    Rectangle {
                        color: "red"
                        anchors.fill: parent
                        anchors.topMargin: 6
                        anchors.leftMargin: 4
                        anchors.rightMargin: 4
                        anchors.bottomMargin: 6
                    }
                }
                scrollBarBackground: Item {
                    implicitWidth: 14
                    implicitHeight: 26
                }
            }
    
            TableView {
                id : tbl
                width: 500
                height: 400
                TableViewColumn {
                    role: "title"
                    title: "Title"
                    width: 100
                }
                TableViewColumn {
                    role: "author"
                    width: 200
                }
                model: "100"
            }
        }
    


  • But TableView inherits from ScrollView, so you get the scroll-related features in TableView too, I don't think you need to insert the TableView in a ScrollView.

    What are you trying to achieve and why do you not simply change the style of the scrollbars in the tableview as instructed in the other topic you posted? TableView provides a list view with scroll bars, styling and header sections, and it should be possible to modify the styling to do what you want with the color and the position.



  • thanks for your response ,
    My tried for the perfect custom table, I have designed a custom table that has remained just scroll .



  • I used once in the table of style, but also the style I want to scroll, you got two the style I use?

            TableView {
                id : tbl
                width: 500
                height: 400
    
                TableViewColumn {
                    role: "title"
                    title: "Title"
                    width: 100
                }
                TableViewColumn {
                    role: "author"
                    width: 200
                }
                model: "100"
                        style:TableViewStyle {
    
                            rowDelegate: Rectangle{
                                height: 50
    
                            }
                            frame: Rectangle {
                                border{
                                    color: "white"
                                }
                            }
                        }
    //style2
                style: ScrollViewStyle {
                    handle: Rectangle {
                        implicitWidth: 14
                        implicitHeight: 26
                        Rectangle {
                            color: "red"
                            anchors.fill: parent
                            anchors.topMargin: 6
                            anchors.leftMargin: 4
                            anchors.rightMargin: 4
                            anchors.bottomMargin: 6
                        }
                    }
                    scrollBarBackground: Item {
                        implicitWidth: 14
                        implicitHeight: 26
                    }
                }
    


  • So according to your code example, you want the handle to be red, and the frame around the view to be white, right?

    Then what you do is put what you have on the ScrollViewStyle on your TableViewStyle, like this, because as previously explained in both topics you started, TableView inherits from ScrollView, so the properties from the parent class can be used in the classes that inherit them:

        TableView {
            id : tbl
            width: 500
            height: 400
    
            TableViewColumn {
                role: "title"
                    title: "Title"
                    width: 100
                }
                TableViewColumn {
                    role: "author"
                    width: 200
                }
                model: "100"
                style:TableViewStyle {
                    rowDelegate: Rectangle{
                        height: 50
                    }
    
                    frame:Rectangle {
                        border{
                            color: "white"
                        }
                    }
                    handle: Rectangle {
                        implicitWidth: 14
                        implicitHeight: 26
                        Rectangle {
                            color: "red"
                            anchors.fill: parent
                            anchors.topMargin: 6
                            anchors.leftMargin: 4
                            anchors.rightMargin: 4
                            anchors.bottomMargin: 6
                        }
                    }
                    scrollBarBackground: Item {
                        implicitWidth: 14
                        implicitHeight: 26
    
                    }
                }
            }
       }
    

    The above code, plus some more code for a window and a menubar produces the following:

    Example



  • Thank you very much ,
    Now the only problem I have left to right scrolling



  • @MrErfan The right to left scrollbar will appear when necessary, just resize the view so it's too small to show your data both from top to bottom and from left to right:

    TableView {
            id : tbl
            width: 200
            height: 200
            //rest of the code is the same as above
    }
    

    I just tested it and the above makes the view show both scrollbars, and both have the red and white styling you wanted.



  • Sorry wrong, I have right to left scrolling


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.