[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)}) } } } } }
-
@vishnu You can handle that in your delegate itself. Add
Rectangle
beforeTextInput
and assign it acolor
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 } }