Vertical header in TableView and ResizeMode for headers
-
I want to resize columns to width of contents (analogically to QHeaderView::ResizeToContents). It doesn't matter how to resize columns: one time by request (like QHeaderView::resizeSections) or automaticaly (like QHeaderView::setResizeMode mode).
I didn't find any TableView or TableViewColumn property to achieve that. I tried to modify width of headerDelegate to contentWidth but I couldn't find way to modify child of headerDelegate Component which is StyleItem (see "source code":http://qt.gitorious.org/qt/qtquickcontrols/blobs/stable/src/styles/Desktop/TableViewStyle.qml).
I also need to make first column to be a header and I wrote:
@TableViewColumn { role: "name"; title: "Permission"; delegate: table.headerDelegate }@I got that:
!http://i.imgur.com/DV5v9tL.png(screenshot)!As you can see, height of rows is too small.
I also got those errors:
@
file:///usr/lib64/qt5/qml/QtQuick/Controls/Styles/Desktop/TableViewStyle.qml:75: Unable to assign [undefined] to bool
file:///usr/lib64/qt5/qml/QtQuick/Controls/Styles/Desktop/TableViewStyle.qml:73: Unable to assign [undefined] to bool
@As I understand that's because styleData.pressed and styleData.containsMouse are not connected to TableViewColumn delegate.
How can I achieve my goals?
-
Resize to contents is something we are planning to add for 5.2. There is currently a patch in the pipeline that you can follow here:
https://codereview.qt-project.org/#change,62971For the time being you will have to duplicate that logic yourself if you want to do it.
As for the second question, the problem is that the header delegate expects a couple of styleData attributes to be available to it's delegate, and the header has different attributes than the item itself (such as sunken and hovered). While it is very hackish, you can simulate this by using a loader and creating your own styleData object:
@
delegate: Loader {
property var rootData: styleData
sourceComponent: table.headerDelegate
property QtObject styleData: QtObject {
property string value: "Header"
property bool pressed
property bool containsMouse
property int column
}
}
@You will probably run into the problem that this overrides the styleData that you get from the view, so you will have to find some way of passing on the item role yourself. A simpler solution would be to simply create a custom header delegate that does not depend on hovered or clicked.
-
Thank you for answer, Jens!
I'll apply patch and describe experiences a little bit later. Patch itself seems to be understandable.
As for headers delegate, it's sad that I cannot use native header style without hacks (did I understood you correct?). I can define my own delegate but it wouldn't look as native as default does. I'll post my results with your hack as soon, as I'll try it.
-
Jens,
I tried your code for creating vertical header delegate and I understood that I don't understand how styleData works. It's not a Loader property but it's likely not an attached property either, because it doesn't look like: <AttachingType>.<propertyName> as written in "docs":http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-objectattributes.html#attached-properties-and-attached-signal-handlers. What is it? Where can I read about it?
I also didn't understand what is the purpose of line:
@property var rootData: styleData@
Is rootData some special property (I didn't find docs describing that property)?
I inserted this code (modified line marked with "//"):
@Loader {
property var rootData: styleData
sourceComponent: table.headerDelegate
property QtObject styleData: QtObject {
property string value: styleData.value // this line is modified
property bool pressed
property bool containsMouse
property int column
}
}@
and got:
!http://imageshack.com/a/img849/5886/74jj.png(this)!But when I wrapped Item around Loader:
@Item { Loader { ... } }@
situation became better:
!http://imageshack.com/a/img841/2473/un7.png(this)!But that's still bad.
-
the rootData member was actually accidental and I simply forgot to remove it when I simplified the code snippet. You can remove it and it probably wont make any difference as it is not even used. Your last example can be fixed by simply adding anchors.fill: parent though.
-
Hmm... Really, I missed anchors.fill property.
I finally got something usable. But I have several problems:
- Your trick with sourceComponent in verticalHeaderDelegate didn't work for me in rowDelegate. I need rowDelegate only for increasing height of rows, I want to save all other row settings. When I added this line to rowDelegate Loader I got "The program has unexpectedly finished." error:
@sourceComponent: table.rowDelegate@
And also change height to 120% of normal as I did is not universal solution.
- I think I found a bug (tell me if I'm wrong and this is a feature, I'm not sure of that). When I place TableView on ApplicationWindow and write:
@anchors.fill: parent@
TableView shows me scroolbars instead of trying to minimize columns width to fit into parent component without scroolbars.
- I tried different variants and stopped on all columns with the same width. I didn't find the way to set width for all columns. I couldn't find the way to iterate through columns too (I've tried to use children property but it gave me bunch of other child, I didn't find how to filter them). So I just copy-pasted the same property to all columns. That's not good.
That's my current code: http://pastebin.com/SwPrrAU9 It's prototype: I'll get actual data from C++ model and I'll make checkboxes editable.
- Your trick with sourceComponent in verticalHeaderDelegate didn't work for me in rowDelegate. I need rowDelegate only for increasing height of rows, I want to save all other row settings. When I added this line to rowDelegate Loader I got "The program has unexpectedly finished." error: