Hi,

I am trying to animate the height from a row in a tableview. I want the height to increase when the row is clicked. When a new row is selected, the previous row should go to the default height (close) and the new selected row should increase it's height (open).

So far I managed to open or close a single row as I would like but if I select a different row, the previously selected row keeps it's height and does not get closed.

I also had to programmatically select the row, because the mouse area does not pass the clicked signal to the row where the mouse area is inside. I have played with the "preventStealing: true" property and set "mouse.accepted = false;" but either the click event does not get fired or the row does not get selected.

Can someone help me figure out how to achieve the desired open/close effect and fix the mouse-click problem?
(If there is another way and I don't need the mouse area that would be perfect, but I will have to handle other mouse events in the opened up row when later more components will show up in the opened up row)

Here is the qml that I am using:
Qt Code: 
  1. import QtQuick 2.4
  2. import QtQuick.Window 2.2
  3. import QtQuick.Controls 1.2
  4. import QtQuick.Controls.Styles 1.2
  5.  
  6. Window {
  7. 	visible: true
  8. 	width: 800
  9. 	height:600
  10.  
  11. 	ListModel {
  12. 		id: libraryModel
  13. 		ListElement {
  14. 			firstname: "Peter Benjamin"
  15. 			surname: "Parker"
  16. 		}
  17. 		ListElement {
  18. 			firstname: "Anthony Edward"
  19. 			surname: "Stark"
  20. 		}
  21. 		ListElement {
  22. 			firstname: "Wade Winston"
  23. 			surname: "Wilson"
  24. 		}
  25. 		ListElement {
  26. 			firstname: "Robert Bruce"
  27. 			surname: "Banner"
  28. 		}
  29. 		ListElement {
  30. 			firstname: "Elektra"
  31. 			surname: "Natchios"
  32. 		}
  33. 		ListElement {
  34. 			firstname: "Selina"
  35. 			surname: "Kyle"
  36. 		}
  37. 		ListElement {
  38. 			firstname: "Clark"
  39. 			surname: "Kent"
  40. 		}
  41. 		ListElement {
  42. 			firstname: "Natalia Alianovna"
  43. 			surname: "Romanova"
  44. 		}
  45. 		ListElement {
  46. 			firstname: "Bruce"
  47. 			surname: "Wayne"
  48. 		}
  49. 	}
  50.  
  51. 	TableView {
  52. 		id: tv
  53. 		anchors.fill: parent
  54. 		model: libraryModel
  55.  
  56. 		rowDelegate: Rectangle {
  57.  
  58. 			property bool isOpen: false
  59. 			property int sizeOpen: 60
  60. 			property int sizeClosed: 20;
  61.  
  62. 			id: rowDelegate
  63. 			color:  styleData.alternate ? "#666666" : "#555555"
  64. 			height: sizeClosed // styleData.selected? sizeOpen : sizeClosed
  65.  
  66. 			function stopAllAnimation()
  67. 			{
  68. 				doOpen.stop();
  69. 				doClose.stop();
  70. 			}
  71.  
  72. 			MouseArea {
  73. 				anchors.fill: parent
  74. 				propagateComposedEvents: true
  75. 				preventStealing: true
  76. 				acceptedButtons: Qt.LeftButton | Qt.RightButton
  77.  
  78. 				onClicked: {
  79. 					tv.selection.forEach( function(rowIndex) { doClose.start(); console.log(rowIndex); } )
  80.  
  81. 					tv.selection.clear();
  82. 					tv.selection.select(styleData.row);
  83.  
  84. //					stopAllAnimation();
  85. 					(rowDelegate.sizeOpen == rowDelegate.height) ? doClose.start() : doOpen.start();
  86.  
  87. 					//mouse.accepted = false;
  88. 				}
  89.  
  90. //				onPressed: mouse.accepted = false;
  91. //				onReleased: mouse.accepted = false;
  92. //				onDoubleClicked: mouse.accepted = false;
  93. //				onPositionChanged: mouse.accepted = false;
  94. //				onPressAndHold: mouse.accepted = false;
  95. 			}
  96.  
  97. 			ParallelAnimation {
  98. 				id: doOpen
  99. 				running: false
  100. 				PropertyAnimation { target: rowDelegate; property: "isOpen"; to: true }
  101. 				NumberAnimation { target: rowDelegate; easing.type: Easing.OutSine; property: "height"; to: sizeOpen; duration: 100 }
  102.  
  103.  
  104. 			}
  105. 			ParallelAnimation {
  106. 				id: doClose
  107. 				running: false
  108. 				NumberAnimation { target: rowDelegate; easing.type: Easing.OutSine; property: "height"; to: sizeClosed; duration: 100; }
  109. 				PropertyAnimation { target: rowDelegate; property: "isOpen"; to: false }
  110. 			}
  111. 		}
  112.  
  113. 		TableViewColumn {
  114. 			id: icon
  115. 			width: 50
  116. 			delegate: Item{
  117. 				anchors.fill: parent
  118. 				clip: !styleData.selected
  119. 				Rectangle {
  120. 					clip:false
  121. 					anchors.top: parent.top
  122. 					anchors.bottom: parent.bottom
  123. 					anchors.left: parent.left
  124. 					//height: 60
  125. 					width: tv.width
  126. 					color: "blue"
  127. 				}
  128. 			}
  129. 		}
  130.  
  131. 		TableViewColumn {
  132. 			id: rowFirst
  133. 			role: "firstname"
  134. 			title: "Firstname"
  135. 			width: 100
  136. 			delegate: Item {
  137. 				id: itemFirst
  138. 				clip:true
  139. 				anchors.fill: parent
  140. 				Text{
  141. 					id:txt
  142. 					anchors.fill: parent
  143. 					text: styleData.value
  144. 					elide: Text.ElideRight
  145. 				}
  146. 			}
  147. 		}
  148. 		TableViewColumn {
  149. 			id: rowSecond
  150. 			role: "surname"
  151. 			title: "Surname"
  152. 			width: 200
  153. 			delegate: Item {
  154. 				id: itemSecond
  155. 				anchors.fill: parent
  156. 				clip: true
  157. 				Text{
  158. 					id:txt2
  159. 					anchors.top: parent.top
  160. 					anchors.left: parent.left
  161. 					anchors.right: parent.right
  162. 					text: styleData.value
  163. 					elide: Text.ElideRight
  164. 				}
  165. 			}
  166. 		}
  167.  
  168. 	}
  169. }
To copy to clipboard, switch view to plain text mode