How to select/highlight multiple items in a GridView using mouse drag over?
-
Hi,
I want to implement the multiple selection in a QML GridView by press and hold, and drag the mouse over the items to select them(like Windows and OSX allow to select multiple items using muse). I prefer to use only QML. The GridView is provided the data using C++ class. Is there any way to do this. Any idea, please share and show me the right way. -
Hello,
I am able to create a selection area on a QML GridView.
The code is as follow..@ GridView {
id: grid
clip: true
anchors.rightMargin: 5
anchors.leftMargin: 5
anchors.bottomMargin: 5
anchors.topMargin: 5
anchors.fill: parent
cellWidth: 130
cellHeight: 160
model: items
snapMode: GridView.SnapToRow
delegate: artistDelegate
focus: true
}MouseArea { id: multiSelection anchors.fill: grid acceptedButtons: Qt.LeftButton hoverEnabled: true onMousePositionChanged: { if(multiSelection.pressed) { if(mouseX >= selectLayer.newX) { selectLayer.width = (mouseX + 10) < (grid.x + grid.width) ? (mouseX - selectLayer.x) : selectLayer.width; } else { selectLayer.x = mouseX < grid.x ? grid.x : mouseX; selectLayer.width = selectLayer.newX - selectLayer.x; } if(mouseY >= selectLayer.newY) { selectLayer.height = (mouseY + 10) < (grid.y + grid.height) ? (mouseY - selectLayer.y) : selectLayer.height; } else { selectLayer.y = mouseY < grid.y ? grid.y : mouseY; selectLayer.height = selectLayer.newY - selectLayer.y; } } } onPressAndHold: { selectLayer.visible = true; selectLayer.x = mouseX; selectLayer.y = mouseY; selectLayer.newX = mouseX; selectLayer.newY = mouseY; selectLayer.width = 0 selectLayer.height = 0; } onPressed: { selectLayer.x = 0; selectLayer.y = 0; selectLayer.newX = 0; selectLayer.newY = 0; selectLayer.visible = false; selectLayer.width = 0; selectLayer.height = 0; } // onReleased: { // console.log(grid.width + " ---- " + selectLayer.width); // } } Rectangle { id: selectLayer property int newX: 0 property int newY: 0 height: 0 width: 0 x: 0 y: 0 visible: false color: "#00000000" // color: "#d341a5" opacity: 0.5 border { width: 1 color: "#d341a5" } onHeightChanged: { console.log("Height is changed...");
// var temp = childAt();
// console.log(grid);
// if(selectLayer.)
var temp = grid.model[1]
// temp.selected = true;
console.log(temp.selected);
}
}
// onVisibleChanged: {
// console.log("visibility is changed...");
// }
}@Now I want to select the items which are overlapped(come in the selection rectangle). I am using Model which has property "selected" and I want to set this property to true. I have no idea how to map to the grid items those come in the selection area. I am trying to do that onHeightChanged event of selection area(i.e. selectLayer) for now. please tell if I am in right direction?
And help me to map the gridview's items. I need index of the items.