in my application I have a tree structure made out of treeitems.
What I wanted to do was change the background of certain tree items if their userObject satisfies certain conditions. The problem I have is when a root tree item is getting its background changed (only tested it on criteria being satisfied at tree items at the root level), all child treeitems of that tree item also have their background changed despite me going in and removing that style sheet on the children.
Long story short: I want it to only change the background on the tree item itself, and not its children.
code:
if(item.getUserObject() != null && ((Device)item.getUserObject()).getDeviceType() == type)
{
item.setStyleName("labelHighlight");
}
else
{
item.removeStyleName("labelHighlight");
}
for(int i = 0; i < item.getChildCount(); i++)
{
highlightNodes(type, item.getChild(i));
}
Use a widget instead of directly styling treeItem. Like this, you can change background of your widget and not the background of all your tree item
Related
I tried to create a QTreeView as example from Qt
http://doc.qt.io/qt-5/qtwidgets-itemviews-editabletreemodel-example.html
When we click on the triangle before each "parent" item, the "children" items will be shown.
In my case I add this line to tree view
myTreeView->setRootIsDecorated(false);
As the result, there is no more triangle before each "parent" item.
But the "children" items are also not shown any more.
My requirements are:
disable the triangle before each "parent" item
show ALL items in the tree, both "parent" and "children"
How can I do it?
As per the comment you can programmatically ensure all items in the tree are visible by calling QTreeView::expandAll...
myTreeView->expandAll();
Note that it may need to be called again as/when child items are added to the model which, depending on the size of the model, could become a performance bottleneck.
As an alternative, it might be better to inherit from QTreeView and override the QTreeView::rowsInserted member.
virtual void MyTreeView::rowsInserted (const QModelIndex &parent, int start, int end) override
{
/*
* Let the base class do what it has to.
*/
QTreeView::rowsInserted(parent, start, end);
/*
* Make sure the parent model index is expanded. If it already
* is expanded then the following should just be a noop.
*/
expand(parent);
}
This should give better performance for large models.
I am using the QtQuick's Drag and Drop example (the Tiles part) to drag and drop tiles (representing buttons) from the list onto the grid as a way to dynamically lay out these buttons.
When "removing" (i.e. reparenting) the tile from the list, an empty space is left. I would like the list to automatically reorganize to close this gap. Is that possible using the approach in the example where the drag/drop is simply done by reparenting the tile? Or do I need to have two models (one for the list and one for the grid) and add/remove the dragged item between the two models?
Thanks for your help!
See this image
to get a better idea of what I mean.
It happens because in the example they just apply a parent change on a child of the tile, so the empty root Item remains in the columns:
// DragTile.qml
Item {
id: root
// ...
MouseArea {
// ...
drag.target: tile
onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root
Rectangle {
id: tile
// ...
}
}
}
If you apply the parent change to the root Item, the Column will automatically be reorganized:
onReleased: {
if (tile.Drag.target) {
root.parent = tile.Drag.target
root.anchors.centerIn = root.parent
}
}
Per this thread, I am attempting to do the following... (simplified for discussion sake).
TreeItem<Step> item = new TreeItem<>(step);
parent.getChildren().add(0, item);
int row = treeView.getRow(item); //row here is -1?
The reason for this is I am trying to select the added item in it's absolute position in the tree using...
TreeTableViewSelectionModel<Step> msm = treeView.getSelectionModel();
msm.select(row);
So, the first child doesn't get selected. But, this works for all added Tree items except the very first child item of any parent. Following TreeItems have the correct row number and are properly selected. Not understanding why the position isn't correct. The other odd thing is I tried the following..
if (row == -1)
{
TreeItem<Step> parent = newStep.getParent(); //First parent at 0
row = treeView.getRow(parent) + 1; //Now row = 1
}
msm.select(row);
The parent TreeItem is STILL selected instead of the child. Again, all this works after adding the first child. Any help would be greatly appreciated.
EDIT: After further testing, it seems as the the item is technically selected. That is to say the application behaves as if the correct item is selected, but the parent TreeItem still graphically appears to be selected in the TreeView (i.e. it is highlighted). Hope this makes sense.
In my tree-table-view I have a root item which contains child items(I have mistakenly called them root items) that in turn have child items. I need to customize those mistakenly called root items rows text appearance. Is there such a selector or how else would that be done?
Thanks.
This will set a pseudo-class on the row containing the root:
final PseudoClass firstRowClass = PseudoClass.getPseudoClass("first-row");
treeTableView.setRowFactory(treeTable -> {
TreeTableRow<...> row = new TreeTableRow<>();
row.treeItemProperty().addListener((ov, oldTreeItem, newTreeItem) ->
row.pseudoClassStateChanged(firstRowClass, newTreeItem == treeTable.getRoot()));
return row ;
});
Now you can select that row in css with
.tree-table-row-cell:first-row { ... }
Complete example here
It sounds like you want to style the immediate child nodes of the root node. In this case, just do
row.treeItemProperty().addListener((ov, oldTreeItem, newTreeItem) ->
row.pseudoClassStateChanged(firstRowClass,
newTreeItem != null && newTreeItem.getParent() == treeTable.getRoot()));
instead of the condition in the code above. Obviously, you can use other criteria as you need them (e.g. ! newTreeItem.isLeaf()).
Note that the default style sheet rules for tree-table-row are a little strange: -fx-background-color is set for the row, but -fx-text-fill is set for both the row and the cells inside it. So if you want to change the background color, you just need
-tree-table-row-cell:first-row {
-fx-background-color: antiquewhite ;
}
but if you want to change the text color, you need to change it on the cells:
-tree-table-row-cell:first-row .tree-table-cell {
-fx-text-fill: red ;
}
i would like to have one list select that will have more than one style, i put two kinds of object's one is a group of users (bold), rest are users (italic or regular) is it possible to add style that will be added to part of added obj?
My code looks like this:
for(Usr usr: userSearchResult){
listSelect.addItem(usr);
}
listSelect.addStyleName("bold");
for (Gr gr : groupSearchResult) {
searchList.addItem(gr);
}
and also have style set in css correct similar to this
.v-select-bold .v-select-select {
font-weight:bold;}
i would be glad to solve this by myself but that was two days ago now i'm in a dot ;)
Thanks in advance for help!
You can store your row as a label with style. In the container there will be a label instance. There you can simply add the style.
Container container = new IndexedContainer();
container.addContainerProperty(NAME_PROPERTY, Label.class , "");
for (int i = 0; i <= 50 ; i++) {
Item item = container.addItem(i);
Label label = new Label(HashUtils.getRandomSalt());
label.addStyleName(style)
item.getItemProperty(NAME_PROPERTY).setValue();
}
return container;
You can't style rows of a ListSelect. You can use a Table component with one column to achieve a similar result. Table.setCellStyleGenerator method is used for differentiating styles for each cell (each row in your case).