How to select/highlight multiple items in a GridView using mouse drag over?

AmanVirdi

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.

AmanVirdi

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.