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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.