[SOLVED] Qml TableView



  • Hi,

    I have a simple TableView with 2 columns. Using the mouse, I can select different cells.
    If I click on a row, I can use the right and left keys, but as soon as I press the up key and leave the clicked row, right and left do not work.
    I guess this is because the TableView has the focus instead of the delegate. How can I make the up key go to the previous index and at the same time put the focus on the correct delegate?

    Here is the QML code for my test example:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    
    Item {
        width: 640
        height: 480
      
        ListModel {
            id: tstModel
            ListElement {
                animal: "dog"
                age: "10"
            }
            ListElement {
                animal: "cat"
                age: "12"
            }
            ListElement {
                animal: "bird"
                age: "1"
            }
            ListElement {
                animal: "elephant"
                age: "20"
            }
            ListElement {
                animal: "turtle"
                age: "100"
            }
        }
    
        TableView {
            id: tableView
            anchors.fill: parent
            anchors.topMargin: 40
            highlightOnFocus: false
            model: tstModel
            property int currentColumn: 0
            rowDelegate: Rectangle {
                color: "#fff"
            }
            itemDelegate: Rectangle {
                color: {
                    var bgColor = model.index%2 ? "whitesmoke" : "white"
                    var activeRow = tableView.currentRow === styleData.row
                    var activeColumn = tableView.currentColumn === styleData.column
                     activeRow && activeColumn ? "steelblue" : bgColor
                }
                Text {
                    text: styleData.value
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        print("(onClick) index: (" + model.index + "," + tableView.currentColumn+ ")")
                        tableView.currentRow = styleData.row
                        tableView.currentColumn = styleData.column
                        model.currentIndex = styleData.row
                        parent.forceActiveFocus()
                    }
                }
                Keys.onRightPressed: {
                    console.log("Delegate Right")
                    if (tableView.currentColumn < tableView.columnCount - 1)
                        tableView.currentColumn++
                    parent.forceActiveFocus()
                    print("(Right) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                }
    
                Keys.onLeftPressed: {
                    console.log("Delegate Left")
                    if (tableView.currentColumn > 0)
                        tableView.currentColumn--
                    parent.forceActiveFocus()
                    print("(Left) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                }
            }
    
            Keys.onRightPressed: {
                console.log("Table Right")
            }
    
            Keys.onLeftPressed: {
                console.log("Table Left")
            }
    
            TableViewColumn {
                id: animalColumn
                title: "Animal"
                role: "animal"
                movable: false
                resizable: false
                width: parent.width / 2
            }
            TableViewColumn {
                id: ageColumn
                title: "Age"
                role: "age"
                movable: false
                resizable: false
                width: parent.width / 2
            }
        }
    }

  • Moderators

    @LMdV You can catch Keys event for TableView instead of delegate. So similar to delegate

    Keys.onRightPressed: {
        if (tableView.currentColumn < tableView.columnCount - 1)
            tableView.currentColumn++
    }
    
    Keys.onLeftPressed: {
        if (tableView.currentColumn > 0)
            tableView.currentColumn--
    }
    
    Keys.onUpPressed: {
        tableView.currentRow--
    }
    
    Keys.onDownPressed: {
        tableView.currentRow++
    }
    


  • @p3c0 Yes that worked. Thanks!

    Here is the full working code, if someone else wants to use the tableView with cell-navigation instead of row-navigation:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    
    Item {
        width: 640
        height: 480
    
    
        ListModel {
            id: tstModel
            ListElement {
                animal: "dog"
                age: "10"
            }
            ListElement {
                animal: "cat"
                age: "12"
            }
            ListElement {
                animal: "bird"
                age: "1"
            }
            ListElement {
                animal: "elephant"
                age: "20"
            }
            ListElement {
                animal: "turtle"
                age: "100"
            }
        }
    
        TableView {
            id: tableView
            anchors.fill: parent
            anchors.topMargin: 40
            highlightOnFocus: false
            model: tstModel
            property int currentColumn: 0
            rowDelegate: Rectangle {
                color: "#fff"
            }
            itemDelegate: Rectangle {
                //            color: "transparent"
                color: {
                    var bgColor = model.index%2 ? "whitesmoke" : "white"
                    var activeRow = tableView.currentRow === styleData.row
                    var activeColumn = tableView.currentColumn === styleData.column
                     activeRow && activeColumn ? "steelblue" : bgColor
                }
                Text {
                    text: styleData.value
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        print("(onClick) index: (" + model.index + "," + tableView.currentColumn+ ")")
                        tableView.currentRow = styleData.row
                        tableView.currentColumn = styleData.column
                        model.currentIndex = styleData.row
                        parent.forceActiveFocus()
                    }
                }
                Keys.onRightPressed: {
                    console.log("Delegate Right")
                    if (tableView.currentColumn < tableView.columnCount - 1)
                        tableView.currentColumn++
                    parent.forceActiveFocus()
                    print("(Right) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                }
    
                Keys.onLeftPressed: {
                    console.log("Delegate Left")
                    if (tableView.currentColumn > 0)
                        tableView.currentColumn--
                    parent.forceActiveFocus()
                    print("(Left) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                }
            }
    
            Keys.onRightPressed: {
                print("(Right - Table) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                if (tableView.currentColumn < tableView.columnCount - 1)
                    tableView.currentColumn++
            }
    
            Keys.onLeftPressed: {
                print("(Left - Table) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                if (tableView.currentColumn > 0)
                    tableView.currentColumn--
            }
    
            Keys.onUpPressed: {
                print("(Up - Table) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                if (tableView.currentRow > 0)
                    tableView.currentRow--
            }
    
            Keys.onDownPressed: {
                print("(Down - Table) index: (" + tableView.currentRow + "," + tableView.currentColumn+ ")")
                if (tableView.currentRow < tableView.rowCount - 1)
                    tableView.currentRow++
            }
    
            TableViewColumn {
                id: animalColumn
                title: "Animal"
                role: "animal"
                movable: false
                resizable: false
                width: parent.width / 2
            }
            TableViewColumn {
                id: ageColumn
                title: "Age"
                role: "age"
                movable: false
                resizable: false
                width: parent.width / 2
            }
        }
    }

Log in to reply
 

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