How to add a color on TableView and keep previous color as I select a row.

[morita]

Hello. I want to add a color on TableView as I select a row. I mean if I select a row after twice, a previous color of the selected row of TableView is not clear. I make a sample. This sample is that when I input a row on textInput and push a button, I can change a color of selected row of TableView.
But the previous color of row of TableView is clear if I select a row after twice . Do you have any solutions ??

main.qml
*```
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
import Qt.text 1.0

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

MainCommonTableView{
	id: mainCommonTableView
	width: 420
	height: 218
	anchors.verticalCenterOffset: -75
	anchors.horizontalCenterOffset: -18
	anchors.centerIn: parent
	onRowClicked: console.log(sendMsg )
}

Button {
	id: button
	x: 262
	y: 400
	width: 80
	height: 24
	text: qsTr("Button")
	background: Rectangle {
		id: buttonRect
		color: "#d2fefe"
	}
	onClicked:{
		mainCommonTableView.selectedRow = textInput.text
	}
}

TextInput {
	id: textInput
	x: 262
	y: 337
	width: 80
	height: 35
	text: qsTr("5")
	verticalAlignment: Text.AlignVCenter
	horizontalAlignment: Text.AlignHCenter
	font.pixelSize: 12
}

Label {
	id: label
	x: 251
	y: 306
	width: 104
	height: 25
	text: qsTr("input 0 to 5")
}

}

MainCommonTableView.qml

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

TableView {
id:control
property string sendMsg
signal rowClicked
property color rowRectangle:rowRectangle
property bool bCtrlSelectionFlag:false;
property int selectedRow

horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

model: ListModel{
	ListElement { data1:"test1"; data2:"test11"; data3:"test111"}
	ListElement { data1:"test2"; data2:"test22"; data3:"test222"}
	ListElement { data1:"test3"; data2:"test33"; data3:"test333"}
	ListElement { data1:"test4"; data2:"test44"; data3:"test444"}
	ListElement { data1:"test5"; data2:"test55"; data3:"test555"}
	ListElement { data1:"test6"; data2:"test66"; data3:"test666"}
}

Rectangle {
	anchors.fill: parent
	color: "transparent"
	anchors.rightMargin: 25
	anchors.bottomMargin: 0
	anchors.leftMargin: 0
	anchors.topMargin: 0
	border.width: 2
	border.color: "#000000"
}

TableViewColumn {
	role: "data1"
	title: "番号"
	width: control.width * 0.2

	delegate: Text {
		anchors.verticalCenter: parent.verticalCenter
		color: "#ffffff"
		elide: styleData.elideMode
		text: styleData.value
		verticalAlignment: Text.AlignVCenter
		horizontalAlignment: Text.AlignHCenter
	}
}

TableViewColumn {
	id: tableViewColumn
	role: "data2"
	title: "日時"
	width: control.width * 0.4
	delegate: Item {
		Text {
			anchors.right: parent.right
			anchors.rightMargin: 0
			anchors.left: parent.left
			anchors.leftMargin: 5
			anchors.bottom: parent.bottom
			anchors.bottomMargin: 0
			anchors.top: parent.top
			anchors.topMargin: 0
			color: "#c3c3c3"
			elide: styleData.elideMode
			text: styleData.value
			verticalAlignment: Text.AlignVCenter
			horizontalAlignment: Text.AlignLeft
		}
	}
}

TableViewColumn {
	role: "data3"
	title: "属性"
	width: control.width * 0.37
	delegate: Text {
		anchors.verticalCenter: parent.verticalCenter
		color: "#ffffff"
		elide: styleData.elideMode
		text: styleData.value
		verticalAlignment: Text.AlignVCenter
		horizontalAlignment: Text.AlignHCenter
	}
}

style: TableViewStyle {
	backgroundColor : "#444343"
	id: tableViewStyle
	frame: Rectangle {
		color: "#303230"
		anchors.right: parent.right
		anchors.rightMargin: 0
		anchors.left: parent.left
		anchors.leftMargin: 0
		anchors.bottom: parent.bottom
		anchors.bottomMargin: 0
		anchors.top: parent.top
		anchors.topMargin: 28
		border.width: 2
		border.color: "#000000"
		anchors.fill: parent
	}

	handle: Rectangle {
		id: handleRect
		color: "transparent"
		anchors.bottom: parent.bottom
		anchors.bottomMargin: 3
		anchors.top: parent.top
		anchors.topMargin: 30
		implicitWidth: 25 // This will be overridden by the width of the scrollbar
		implicitHeight: 30 // This will be overridden based on the size of the scrollbar
		Rectangle {
			anchors.horizontalCenter: handleRect.horizontalCenter
			anchors.bottom: handleRect.bottom
			anchors.bottomMargin: 0
			anchors.top: handleRect.top
			anchors.topMargin: 0
			implicitWidth: 18 // This will be overridden by the width of the scrollbar
			implicitHeight: 30
			color: "#a6a6a6"
		}
	}
	scrollBarBackground: Rectangle {
		anchors.bottom: parent.bottom
		anchors.bottomMargin: 2
		anchors.top: parent.top
		anchors.topMargin: 30
		implicitWidth: 25
		implicitHeight: 30
		color: "#303230"
	}
	decrementControl: Rectangle {
		anchors.top: parent.top
		anchors.topMargin:30
		implicitWidth: 25
		implicitHeight: 25
		color: "#303230"
		Image {
			source: "./../assets/scrollBarTriangle.png"
			rotation: 0
		}
	}
	incrementControl: Rectangle {
		implicitWidth: 25
		implicitHeight: 25
		color: "#303230"
		Image {
			anchors.fill: parent
			source: "./../assets/scrollBarTriangle.png"
			rotation: 180
		}
	}

	//header
	headerDelegate: Rectangle {
		height: 30
		border.width: 1
		color: "#303230"
		border.color: "#000000"
		Text {
			text: styleData.value
			font.pointSize: 8
			horizontalAlignment: Text.AlignHCenter
			verticalAlignment: Text.AlignVCenter
			anchors.fill: parent
			color: "#c3c3c3"
		}
	}

	//row
	rowDelegate: Rectangle {
		id: rowRectangle
		property color rowColor: {
			if ( styleData.row === selectedRow ) {
				"green"
			}
			else {
				"blue"
			}
		}
		color: rowColor
		height: 35

		Rectangle {
			x: control.width * 0.197
			height: 35
			width: control.width * 0.003
			color: "black"
		}

		Rectangle {
			x: control.width * 0.597
			height: 35
			width: control.width * 0.003
			color: "black"
		}

		Rectangle {
			x: control.width * 0.997
			height: 35
			width: control.width * 0.003
			color: "black"
		}
	}
}

onClicked: {
	//send a current row - message
	sendMsg = control.currentRow + 1
	rowClicked();
}

}

[lemons]

Let's simplify your question.
You want to know how to highlight the currently selected row. Right?
-> add an int property to your TableView, and set it to your "selected row index" on click
-> then compare the index in the rowDelegate to the "selected row index"

TableView {
    id: control
    property int selectedRowIndex

onClicked: {
    //send a current row - message
    selectedRowIndex = control.currentRow
}

rowDelegate: Rectangle {
    id: rowRectangle
    property color rowColor: styleData.row === selectedRowIndex ? "green" : "blue"

---

Note: in case you still require your signal, you can pass a value with it:

TableView {
    id: control
    signal rowClicked(int myIndex)

onClicked: {
    rowClicked(control.currentRow)

MainCommonTableView {
    id: mainCommonTableView
    onRowClicked: console.log(myIndex)
}

In case you want to colorize multiple rows, you could add the index to an array and check if the array includes the index.

TableView {
    id: control
    property var selectedRowIndexes: []

rowDelegate: Rectangle {
    id: rowRectangle
    property color rowColor: selectedRowIndexes.includes(
                                     styleData.row) ? "green" : "blue"

onClicked: {
    let tmp = selectedRowIndexes
    tmp.push(control.currentRow)
    // resetting the array triggers re-evaluation of bindings to array
    selectedRowIndexes = []
    selectedRowIndexes = tmp
}

[lemons]

Just re-read your question. For the button feature you could do something like this:

TableView {
    id: control
    // [...]
    onClicked: {
        selectAdditionalRow(control.currentRow)
    }
    function selectAdditionalRow(index) {
        if (selectedRowIndexes.includes(index))
            return

        let tmp = selectedRowIndexes
        tmp.push(index)
        // resetting the array triggers re-evaluation of bindings to array
        selectedRowIndexes = []
        selectedRowIndexes = tmp
    }
}

Button {
    id: button
    onClicked: {
        mainCommonTableView.selectAdditionalRow(parseInt(textInput.text))
    }
}

[morita]

@lemons Thank you for replying me. Unfortunately, you may misunderstand.
As you say, I want to highlight the currently selected row. But I want to highlight previous selected rows too. For example, for the first time, I input "1" on "textInput" and I push a button. The selected row is highlighted on 2st row at "TableView". That is ,Green is displayed on 2st row. Secondly , I input "2" on "textInput" and I push a button. The selected row is highlighted on 3nd row at "TableView". In this case, I want to keep green on 2nd row at "TableView". I currently have a problem green on 2nd row is removed. I do not know the reason.

But below code you mention may be a good idea because I can colorize multiple rows.

TableView {
    id: control
    property var selectedRowIndexes: []
rowDelegate: Rectangle {
    id: rowRectangle
    property color rowColor: selectedRowIndexes.includes(
                                     styleData.row) ? "green" : "blue"
onClicked: {
    let tmp = selectedRowIndexes
    tmp.push(control.currentRow)
    // resetting the array triggers re-evaluation of bindings to array
    selectedRowIndexes = []
    selectedRowIndexes = tmp
}

[lemons]

@morita just combine my comments :)

you only had one integer which indicated the selected row. after changing its value, a different row got highlighted and the previous one lost its "selected" state.

TableView {
    id: control
    property var selectedRowIndexes: []
    // [...]
    rowDelegate: Rectangle {
        id: rowRectangle
        property color rowColor: selectedRowIndexes.includes(
                                     styleData.row) ? "green" : "blue"
        //[...]
        }
    }
    onClicked: {
        //send a current row - message
        selectAdditionalRow(control.currentRow)
    }
    function selectAdditionalRow(index) {
        if (selectedRowIndexes.includes(index))
            return
    
        let tmp = selectedRowIndexes
        tmp.push(index)
        // resetting the array triggers re-evaluation of bindings to array
        selectedRowIndexes = []
        selectedRowIndexes = tmp
    }
} 
// end MainCommonTableView.qml

Button {
    id: button
    onClicked: {
        // add -1 for "row count" to row index
        mainCommonTableView.selectAdditionalRow(parseInt(textInput.text) - 1)
    }
}

[lemons]

Here for copy and paste:

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
import Qt.text 1.0
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MainCommonTableView {
        id: mainCommonTableView
        width: 420
        height: 218
        anchors.verticalCenterOffset: -75
        anchors.horizontalCenterOffset: -18
        anchors.centerIn: parent
        onRowClicked: console.log(sendMsg)
    }

    Button {
        id: button
        x: 262
        y: 400
        width: 80
        height: 24
        text: qsTr("Button")
        background: Rectangle {
            id: buttonRect
            color: "#d2fefe"
        }
        onClicked: {
            //mainCommonTableView.selectedRow = textInput.text
            // add -1 for "row count" to row index
            mainCommonTableView.selectAdditionalRow(parseInt(
                                                        textInput.text) - 1)
        }
    }

    TextInput {
        id: textInput
        x: 262
        y: 337
        width: 80
        height: 35
        text: qsTr("5")
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 12
    }

    Label {
        id: label
        x: 251
        y: 306
        width: 104
        height: 25
        text: qsTr("input 0 to 5")
    }
}

//MainCommonTableView.qml
import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
TableView {
    id: control
    property string sendMsg
    signal rowClicked
    property color rowRectangle: rowRectangle
    property bool bCtrlSelectionFlag: false
    //property int selectedRow
    property var selectedRowIndexes: []

    horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

    model: ListModel {
        ListElement {
            data1: "test1"
            data2: "test11"
            data3: "test111"
        }
        ListElement {
            data1: "test2"
            data2: "test22"
            data3: "test222"
        }
        ListElement {
            data1: "test3"
            data2: "test33"
            data3: "test333"
        }
        ListElement {
            data1: "test4"
            data2: "test44"
            data3: "test444"
        }
        ListElement {
            data1: "test5"
            data2: "test55"
            data3: "test555"
        }
        ListElement {
            data1: "test6"
            data2: "test66"
            data3: "test666"
        }
    }

    Rectangle {
        anchors.fill: parent
        color: "transparent"
        anchors.rightMargin: 25
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        border.width: 2
        border.color: "#000000"
    }

    TableViewColumn {
        role: "data1"
        title: "番号"
        width: control.width * 0.2

        delegate: Text {
            anchors.verticalCenter: parent.verticalCenter
            color: "#ffffff"
            elide: styleData.elideMode
            text: styleData.value
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }

    TableViewColumn {
        id: tableViewColumn
        role: "data2"
        title: "日時"
        width: control.width * 0.4
        delegate: Item {
            Text {
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0
                color: "#c3c3c3"
                elide: styleData.elideMode
                text: styleData.value
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignLeft
            }
        }
    }

    TableViewColumn {
        role: "data3"
        title: "属性"
        width: control.width * 0.37
        delegate: Text {
            anchors.verticalCenter: parent.verticalCenter
            color: "#ffffff"
            elide: styleData.elideMode
            text: styleData.value
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }

    style: TableViewStyle {
        backgroundColor: "#444343"
        id: tableViewStyle
        frame: Rectangle {
            color: "#303230"
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 28
            border.width: 2
            border.color: "#000000"
            anchors.fill: parent
        }

        handle: Rectangle {
            id: handleRect
            color: "transparent"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 3
            anchors.top: parent.top
            anchors.topMargin: 30
            implicitWidth: 25 // This will be overridden by the width of the scrollbar
            implicitHeight: 30 // This will be overridden based on the size of the scrollbar
            Rectangle {
                anchors.horizontalCenter: handleRect.horizontalCenter
                anchors.bottom: handleRect.bottom
                anchors.bottomMargin: 0
                anchors.top: handleRect.top
                anchors.topMargin: 0
                implicitWidth: 18 // This will be overridden by the width of the scrollbar
                implicitHeight: 30
                color: "#a6a6a6"
            }
        }
        scrollBarBackground: Rectangle {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.top: parent.top
            anchors.topMargin: 30
            implicitWidth: 25
            implicitHeight: 30
            color: "#303230"
        }
        decrementControl: Rectangle {
            anchors.top: parent.top
            anchors.topMargin: 30
            implicitWidth: 25
            implicitHeight: 25
            color: "#303230"
            Image {
                source: "./../assets/scrollBarTriangle.png"
                rotation: 0
            }
        }
        incrementControl: Rectangle {
            implicitWidth: 25
            implicitHeight: 25
            color: "#303230"
            Image {
                anchors.fill: parent
                source: "./../assets/scrollBarTriangle.png"
                rotation: 180
            }
        }

        //header
        headerDelegate: Rectangle {
            height: 30
            border.width: 1
            color: "#303230"
            border.color: "#000000"
            Text {
                text: styleData.value
                font.pointSize: 8
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                anchors.fill: parent
                color: "#c3c3c3"
            }
        }

        //row
        rowDelegate: Rectangle {
            id: rowRectangle

            /*
            property color rowColor: {
                if (styleData.row === selectedRow) {
                    "green"
                } else {
                    "blue"
                }
            }*/
            property color rowColor: selectedRowIndexes.includes(
                                         styleData.row) ? "green" : "blue"
            color: rowColor
            height: 35

            Rectangle {
                x: control.width * 0.197
                height: 35
                width: control.width * 0.003
                color: "black"
            }

            Rectangle {
                x: control.width * 0.597
                height: 35
                width: control.width * 0.003
                color: "black"
            }

            Rectangle {
                x: control.width * 0.997
                height: 35
                width: control.width * 0.003
                color: "black"
            }
        }
    }

    onClicked: {
        //send a current row - message
        sendMsg = control.currentRow + 1
        rowClicked()

        selectAdditionalRow(control.currentRow)
    }
    function selectAdditionalRow(index) {
        if (selectedRowIndexes.includes(index))
            return

        let tmp = selectedRowIndexes
        tmp.push(index)
        // resetting the array triggers re-evaluation of bindings to array
        selectedRowIndexes = []
        selectedRowIndexes = tmp
    }
}

[morita]

@lemons 　Thank you so much ! This is the best solution !