Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to select/highlight multiple items in a GridView using mouse drag over?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 1 Posters 3.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    AmanVirdi
    wrote on 18 Oct 2012, 06:46 last edited by
    #1

    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.

    1 Reply Last reply
    0
    • A Offline
      A Offline
      AmanVirdi
      wrote on 18 Oct 2012, 12:35 last edited by
      #2

      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.

      1 Reply Last reply
      0

      1/2

      18 Oct 2012, 06:46

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved