Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Change Tabulation Order in TableView

Change Tabulation Order in TableView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 127 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pekeso
    wrote on last edited by
    #1

    I have the code below creating a table with 3 cells.
    How can I change the tabulation order in the table? For example, going from cell1 to cell3 instead of cell2.

    import QtQuick
    import QtQuick.Window
    import QtQuick.Controls
    import Qt.labs.qmlmodels
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Test Table")
    
        TableView {
            anchors.fill: parent
            columnSpacing: 5
            rowSpacing: 2
            clip: true
            flickableDirection: Flickable.AutoFlickIfNeeded
    
            model: TableModel {
                TableModelColumn { display: "name" }
                TableModelColumn { display: "color" }
                TableModelColumn { display: "make" }
    
                rows: [
                    {
                        "name": "",
                        "color": "",
                        "make": ""
                    }
                ]
    
                property var headers: [
                    {
                        'id': 'name_header',
                        'align': Text.AlignLeft,
                        'role':  'name',
                        'title': qsTr("name"),
                        'visible': true,
                        'width': 100
                    },
                    {
                        'id': 'color_header',
                        'align': Text.AlignLeft,
                        'role':  'color',
                        'title': qsTr("color"),
                        'visible': true,
                        'width': 100
                    },
                    {
                        'id': 'make_header',
                        'align': Text.AlignLeft,
                        'role':  'make',
                        'title': qsTr("make"),
                        'visible': true,
                        'width': 100
                    }
                ]
            }
    
            delegate: DelegateChooser {
                DelegateChoice {
                    column: 0
    
                    TextField {
                        id: nameField
                        selectByMouse: true
                        Flickable {
                            contentWidth: 100
                            ScrollBar.horizontal: ScrollBar { }
                        }
                        property bool selected: false
                        property bool borderless: false
                        property bool modified: false
                        text: "first entry"
    
                        background: Rectangle {
                           color: "white"
                           border.color: nameField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                           border.width: 1
                           radius: 2.0
                        }
                    }
                }
    
                DelegateChoice {
                    column: 1
                    TextField {
    
                        selectByMouse: true
                        property bool selected: false
                        property bool borderless: false
                        property bool modified: false
                        text: "second entry"
    
                        background: Rectangle {
                           color: "white"
                           border.color: colorField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                           border.width: 1
                           radius: 2.0
                        }
                    }
                }
    
                DelegateChoice {
    
                    column: 2
    
                    Component {
                        TextField {
                            selectByMouse: true
                            property bool selected: false
                            property bool borderless: false
                            property bool modified: false
                            text: "last entry"
    
                            background: Rectangle {
                               color: "white"
                               border.color: makeField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                               border.width: 1
                               radius: 2.0
                            }
                        }
                    }
                }
            }
        }
    }
    
    

    Thank you

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved