[Solved]How to highlight a row in TableView written in QML



  • I have tableView written in QML. I can add many rows. From cpp side a get a particular number say 3. Now I would like to hightlight, with a color,that particular row say 3rd row. How can I hightlight a particular row in TableView ? Thanks

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    import "Utilities"
    Rectangle {
        id:root
        width: parent.width
        height: parent.height
        //    anchors.fill: parent
        FestoDesign{id:festoDesign}
    
        Row{
            id:buttons
            anchors.top: root.top
            spacing: 50
            anchors.horizontalCenter: parent.horizontalCenter
            Button{
                id:addNewRowButton
                text: "ADD"
                onClicked: {
                    setTableModel.append({"x_position": 200,
                                             "y_position":0,
                                             "z_position":335,
                                             "velocity":100,
                                             "acceleration":100,
                                             "deceleration":50,
                                             "tool":0,
                                             "tracking_x":0,
                                             "tracking_y":0,
                                             "tracking_z":0}
                                         )
                }
            }
            Button{
                id:deleteRowButton
                text: "DELETE"
                onClicked: {
                    setTableModel.remove(setTableView.currentRow)
                }
            }
            Button{
                id:setTable
                text: "START SetTable"
                onClicked: {
                    tcpCommunicationPort.startSetTable();
                }
            }
    
    
        }
        ListModel{
            id:setTableModel
    
            ListElement{
                x_position: 400
                y_position: 0
                z_position: 330
                velocity: 100
                acceleration:50
                deceleration:0
                tool:0
                tracking_x: 0
                tracking_y:0
                tracking_z:0
            }
            onDataChanged: {
                console.log("Data changed")
    
            }
    
        }
    
        TableView{
            id:setTableView
            objectName: "setTableView"
            model: {
                setTableModel
            }
            width: parent.width
            height: parent.height-buttons.height
            anchors.margins: 2
    //        alternatingRowColors: true
    //        backgroundVisible: true
    //        headerVisible: true
            anchors.top: buttons.bottom
            TableViewColumn {
                role: "x_position"
                title: "X mm"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"x_position":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "y_position"
                title: "Y mm"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"y_position":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "z_position"
                title: "Z mm"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"z_position":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "velocity"
                title: "V m/s"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"velocity":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "acceleration"
                title: "A m/s2"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
    
                    onAccepted: {
                        setTableModel.set(styleData.row,{"acceleration":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "deceleration"
                title: "D m/s2"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"deceleration":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "tool"
                title: "Tool"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {bottom: 0; top: 1;}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"tool":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "tracking_x"
                title: "Tx mm"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"tracking_x":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "tracking_y"
                title: "Ty mm"
                width:setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"tracking_y":parseInt(text)})
                    }
                }
            }
            TableViewColumn {
                role: "tracking_z"
                title: "Tz mm"
                width: setTableView.width/10
                delegate:
                    TextInput {
                    font.pixelSize : festoDesign.fontSizeSmall
                    font.family: festoDesign.fontSizeSmall
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    renderType: Text.NativeRendering
                    validator: IntValidator {}
                    text: styleData.value
                    onAccepted: {
                        setTableModel.set(styleData.row,{"tracking_z":parseInt(text)})
                    }
                }
            }
        }
    }
    

  • Moderators

    @vishnu You can handle that in your delegate itself. Add Rectangle before TextInput and assign it a color depending upon condition. The condition being here a particular row. Something like:

    property int selectedRow: 2 // for eg. change it as per your need from C++ or click
    delegate: Rectangle {
        color: styleData.row===selectedRow ? "yellow" : "white"
        TextInput {
            anchors.fill: parent
            text: styleData.value
        }
    }
    


  • @p3c0
    Perfect !! Thanks a lot :)


Log in to reply
 

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