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

[vishnu]

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)})
                }
            }
        }
    }
}

[p3c0]

@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
    }
}

[vishnu]

@p3c0
Perfect !! Thanks a lot :)